<template>
  <div class="datamax" @keyup.ctrl="ctrEnterUp" @keydown.ctrl="ctrEnterDowm">
    <div class="header">
      <div class="header-left">
        <img v-on:click.stop="backToList" src="../../assets/imgs/5.png">
      </div>
      <div class="header-center">
        <span>{{defaultsettings.title}}</span>
      </div>
      <div class="header-right">
        <div class="datamax-check" v-on:click="preView">    
             <img src="../../assets/imgs/6.png">
             <span>预览</span>
        </div>
        <div class="datamax-set" v-on:click="showDefaultSettings">
          <img src="../../assets/imgs/7.png">
          <span>大屏设置</span>
        </div>
      </div>
      <!-- header_right_end -->
    </div>
    <!-- header_end -->
    <div class="view-container" v-on:ondragenter = "imgDragenterEnter" v-on:dragover = "imgDragenterOver" v-on:drop = "imgDragenterDrop">
      <div class="modules-key">
          <ul class="modules-key-list">
            <li :id="module.id" v-on:click="showModules(module.id)" v-for="module in modulessource">
              <img :src="module.img">
              <span>{{module.name}}</span>
            </li>
          </ul>
          <div class="modules" :style="modules.style">
            <ul class="modules-items">
              <li  class="modules-item" v-for="item in modules.modulesource" :key="item.id">
                <div class="modules-min">
                  <img v-on:dragstart = "imgDraggable(item.type)" draggable="true" :src="item.src">
                  <span>{{item.name}}</span>
                </div>
              </li>
              <li v-if="modules.modulesource.length==0" style="color:#ececec">
                什么都没有哦！
              </li>
            </ul>
          </div> 
          <!-- modules_end -->
      </div>
      <!-- modules-key-end -->
      <div id="view-profile" :style="modules.imgstyleright" v-on:click.stop="moduleDefaultShow">
        <div id="view-imgs" ref="view-imgs" :style="modules.imgstyle">
          <div id="imgmodules">
            <div class="imgmoduleitem" v-on:mousemove="imgModulesMouseMove($event,item.id)" v-on:mousedown.stop ="imgModulesMouseDown($event,item.id)"  v-for="item in imgmodules" :id="item.id" :style="item.style">
              <div v-if="item.type=='tupian'">
                 <img :src="item.config.imgsrc" :style="{'width':item.style.width,'height':item.style.height}">
              </div> 
              <div class="im-dhwb" v-if="item.type=='danhangwenben'">
                <div :style="item.config.widgets.style">{{item.config.widgets.text}}</div>
              </div><!-- im-dhwb_end -->
              <div class="im-bg" :style="{'font-size':item.config.widgets.xStyle.fontSize+'px','color':item.config.widgets.xStyle.color||'#fff'}" v-if="item.type == 'biaoge'">
                <div class="im-bg-container">
                    <div class="im-bg-header">
                      <table cellspacing="0" cellpadding="0" border="0">
                        <colgroup>
                        </colgroup> 
                        <thead>
                          <tr>
                            <th v-for="(itemheader,index) in item.config.widgets.x" class="im-bg-header-column">
                              <div class="im-bg-header-cell">
                                <span class="">{{itemheader}}</span> 
                              </div>
                            </th>
                           </tr>
                         </thead>
                         <tbody class="im-bg-data-tbody" >
                          <tr class="im-bg-data-row" v-for="(itembody,index) in item.config.widgets.y">
                            <td v-for="(itemcolumn,index) in itembody" class="im-bg-data-column">
                              <div class="im-bg-data-cell">
                                <span>{{itemcolumn}}</span> 
                              </div>
                            </td>
                          </tr>
                        </tbody>
                       </table>
                    </div>
                </div>
              </div><!-- im-bg_end -->
              <div class="im-szt" v-if="item.type=='shuzitu'">
                 <div class="im-szt-container" :style="item.config.widgets.style">
                   <div class="im-szt-num" :style="item.config.widgets.numBackStyle" v-for="num in item.config.widgets.text.split('')">
                      {{num}}
                   </div>
                 </div>
              </div>
              <!-- im-szt_end -->
            </div>
          </div>
          <!-- imgmodules_end -->
          <div id="imggrid" :style="modules.gridstype">
            <canvas id='imggriddraw' width="1920" height="1080"></canvas>
          </div>          
          <div id="zoom-container" v-on:click.stop="zoomsHidden">
              <div v-if="(zooms.show)" class="zoom-handles" :style="zooms.style">
                  <span class="zoom-handler handle-left" v-on:mousemove="resizeMouseMove($event)"  v-on:mousedown.stop="resizeMouseDown($event,'left')"></span>

                  <span class="zoom-handler handle-right" v-on:mousemove="resizeRightMouseMove($event)"  v-on:mousedown.stop="resizeMouseDown($event,'right')"></span>

                  <span class="zoom-handler handle-top"  v-on:mousemove="resizeBottomMouseMove($event)"  v-on:mousedown.stop="resizeMouseDown($event,'top')"></span>

                  <span class="zoom-handler handle-bottom"  v-on:mousemove="resizeBottomMouseMove($event)"  v-on:mousedown.stop="resizeMouseDown($event,'bottom')"></span>

                  <span class="zoom-handler handle-lefttop" v-on:mousemove="resizeMouseMove($event)" v-on:mousedown.stop="resizeMouseDown($event,'lefttop')"></span>

                  <span class="zoom-handler handle-leftbottom" v-on:mousemove="resizeMouseMove($event)" v-on:mousedown.stop="resizeMouseDown($event,'leftbottom')"></span>

                  <span class="zoom-handler handle-rightbottom" v-on:mousemove="resizeMouseMove($event)"  v-on:mousedown.stop="resizeMouseDown($event,'rightbottom')"></span>

                  <span class="zoom-handler handle-righttop" v-on:mousemove="resizeMouseMove($event)"  v-on:mousedown.stop="resizeMouseDown($event,'righttop')"></span>
              </div>
              <div v-if="(zooms.show)" v-on:mousemove="boardMouseMove($event)"  v-on:mousedown.stop="boardMouseDown($event)" @contextmenu.prevent=""  id="drop-board" :style="zooms.style">
                  <div class = "item-border" :style=""></div>
              </div>
          </div>
          <!-- zoom-container_end -->
        </div>
        <div id="view-menu" :style="defaultsettings.menustyle">
          <ul>
            <li v-on:click.stop="moduleTop(999)">置顶</li>
            <li v-on:click.stop="moduleTop(1)">置底</li>
          <!--   <li v-on:click.stop="moduleCoppy">复制</li> -->
            <li v-on:click.stop="moduleDeleteShow">删除</li>
          </ul>
        </div>
        <!-- view-imgs_end -->
      </div>
      <!-- view-profile_end -->
      <div id="view-config" :style="defaultsettings.viewconfigstyle" v-on:click="selectHidden">
          <div class="vc-title">
              组件配置
          </div>
          <div class="vc-container">
            <div class="vc-size">
              <div class="vc-sizewidth">
                <span>宽</span><input @input="handleModuleInput($event,'kuan')" v-on:change="currentmoduleSizeChange($event,'kuan')" v-model="currentmodule.width" type="text" placeholder="宽度">
              </div>
              <div class="vc-sizeheight">
                <span>高</span><input @input="handleModuleInput($event,'gao')"  v-on:change="currentmoduleSizeChange($event,'gao')" v-model="currentmodule.height" type="text" placeholder="高度">
              </div>
              <div class="vc-sizeleft">
                <span>左</span><input @input="handleModuleInput($event,'left')"  v-on:change="currentmoduleSizeChange($event,'left')" v-model="currentmodule.left" type="text" placeholder="左侧">
              </div>
              <div class="vc-sizetop">
                <span>上</span><input @input="handleModuleInput($event,'top')"  v-on:change="currentmoduleSizeChange($event,'top')" v-model="currentmodule.top" type="text" placeholder="顶部">
              </div>
            </div>
            <!-- vc-size_end -->
            <div class="vc-name">
              <span>名称</span><input v-on:change="currentmoduleSizeChange($event,'name')" v-model="currentmodule.name" type="text" maxlength="50" placeholder="请输入组件名称">
            </div>
            <div class="vc-name vc-grade">
              <span>优先级 </span><input @input="handleModuleInput($event,'index')" v-on:change="currentmoduleSizeChange($event,'index')" v-model="currentmodule.zindex" type="text" maxlength="50" placeholder="请输入组件名称">
            </div>
            <div class="vc-item vc-background" v-if="(currentmodule.config.img)">
              <div class="vc-titlename">
                图片选择
              </div>
              <div class="vc-bkg-file">
                <div class="vc-bkg-img">
                  <img :src="currentmodule.config.imgsrc">
                </div>
                <input ref="referenceSrcUpload" v-on:change="imgmoduleSrcChange" type="file" accept="image/*" class="vc-upload-input" v-on:click.stop="">
                <div class="vc-bkg-file-choose" :style="defaultsettings.srcchoosestyle">
                  <i class="ivu-icon ivu-icon-ios-cloud-upload" style="font-size: 52px; color: rgb(51, 153, 255);"></i>
                  <p>点击选择图片</p>
                </div>
              </div>            
            </div>
            <div class="vc-name vc-sjys" v-if="(currentmodule.config.datas)">
              <div class="vc-sjys-title"> 
                <span v-on:click.stop="dataSetHidden" :data-before="currentmodule.config.datasetbeforecontent" class="vc-dc-title">数据样式</span>
                <span v-on:click="addDataTypeConfigGroup" v-if="(currentmodule.type=='jichuzhuzhuangtu'||currentmodule.type=='caisezhuzhuangtu'||currentmodule.type=='duidiezhuzhuangtu'||currentmodule.type=='jiaocuozhengfuzhoubiaoqiantu'||currentmodule.type=='qiantaobingtu'||currentmodule.type=='tiaoxingtu')" class="vc-adddataconfig">添加</span>
              </div>
              <div class="vc-sjys-datas" v-if="((currentmodule.type=='jichuzhuzhuangtu'||currentmodule.type=='caisezhuzhuangtu'||currentmodule.type=='duidiezhuzhuangtu'||currentmodule.type=='jiaocuozhengfuzhoubiaoqiantu')&&currentmodule.config.datasetbeforecontent=='-')">
                <div class="vc-dataconfig" v-for="(item,index) in currentmodule.config.params.moduledatas.style.y">
                  <span class="vc-dc-title">数组{{index+1}}</span> <span v-on:click="addDataTypeConfig(index)" class="vc-adddataconfig">添加</span><span v-on:click="delDataTypeConfigGroup(index)" class="vc-adddataconfig vc-adddataconfig-del">删除</span>
                  <div class="vc-dataconfig-color">
                      <span >顶部字色</span>
                      <div :style="{'background':item.label.color}" v-on:click.stop="colorPickShow($event,index,'0',3,item.label.color)" class="colorpicker"></div>
                  </div>
                  <div class="vc-dataconfig-color">
                    <span >边框色</span>
                    <div :style="{'background':item.borderColor}" v-on:click.stop="colorPickShow($event,index,'',2,item.borderColor)" class="colorpicker"></div>
                  </div>
                  <div class="vc-dataconfig-color">
                    <span class="vc-dataconfig-border">边框粗细</span>
                    <input type="text" v-on:change="handleBorderWidthChange($event,index)" @input="handleBorderWidthInput($event,index)" v-model="item.borderWidth" placeholder="请输入数字">
                  </div>
                  <div class="vc-dataconfig-color">
                    <span class="vc-dataconfig-border">柱形粗细</span>
                    <input type="text" v-on:change="handleBarWidthChange($event,index)" @input="handleBarWidthInput($event,index)" v-model="item.barWidth" placeholder="请输入数字">
                  </div>
                  <div class="vc-dp-item" v-for="(itemcolor,indexcolor) in item.style.color">
                    <div class="vc-colors" v-on:click.prevent.stop="">
                      <photoshop-picker  @input="colorPickUpdateValue" class="vc-colorpicker" :style="itemcolor[0]" v-model="colors" />
                      <photoshop-picker @input="colorPickUpdateValue" class="vc-colorpicker" :style="itemcolor[1]" v-model="colors" />
                      <photoshop-picker @input="colorPickUpdateValue" class="vc-colorpicker" :style="item.borderStyle" v-model="colors" />
                      <photoshop-picker @input="colorPickUpdateValue" class="vc-colorpicker" :style="item.label.style" v-model="colors" />
                    </div>
                    <span>项目{{indexcolor+1}}</span><span v-on:click="delDataTypeConfig(index,indexcolor)" class="vc-adddataconfig vc-adddataconfig-del">移除</span>
                    <div class="vc-dp-item-config">
                      <div class="vc-dataconfig-color">
                        <span>填充色</span>
                        <div :style="{'background':item.color[indexcolor][0]}" v-on:click.stop="colorPickShow($event,index,indexcolor,0,item.color[indexcolor][0])" class="colorpicker"></div>&nbsp; — &nbsp;
                        <div :style="{'background':item.color[indexcolor][1]}" v-on:click.stop="colorPickShow($event,index,indexcolor,1,item.color[indexcolor][1])" class="colorpicker"></div>
                      </div>
                      
                    </div>
                    <!-- vc-dp-item-config_end -->
                  </div>
                  <!-- vc-dp-item_end -->
                </div>
              </div>
              <!-- vc-sjys-datas_end -->
              <div class="vc-sjys-datas" v-if="((currentmodule.type=='danhangwenben')&&currentmodule.config.datasetbeforecontent=='-')">
                <div class="vc-dataconfig">
                  <div class="vc-colors" v-on:click.prevent.stop="">
                      <photoshop-picker  @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.widgets.style.colorStyle[0]" v-model="colors">
                      </photoshop-picker>
                  </div>
                  <div class="vc-dataconfig-color">
                    <span >字体颜色</span>
                    <div :style="{'background':currentmodule.config.widgets.style.color}" v-on:click.stop="colorPickShow($event,'','',21,currentmodule.config.widgets.style.color)" class="colorpicker"></div>
                  </div>
                  <div class="vc-dataconfig-color">
                    <span class="vc-dataconfig-border">字体大小</span>
                    <input type="text" v-on:change="handleDanhangwenbenFontSizeChange($event)" @input="handleDanhangwenbenFontSizeInput($event)" v-model="currentmodule.config.widgets.fontSize" placeholder="请输入数字">
                  </div>
                  <div class="vc-dataconfig-color vc-dataconfig-font-weight">
                    <span class="vc-dataconfig-border vc-dataconfig-font-weight">字体粗细</span>
                    <div   class="vc-datatypechoose" type="text">
                      <div v-if="currentmodule.config.widgets.style['font-weight']=='400'"  v-on:click.stop="showDanhangwenbenDatatypeChoose">正常</div>
                      <div v-if="currentmodule.config.widgets.style['font-weight']=='600'" v-on:click.stop="showDanhangwenbenDatatypeChoose"> 加粗</div>
                      <ul class="vc-rstchoose " :style="currentmodule.config.widgets.style.fontStyle">
                        <li v-on:click="chooseDanhangwenbenDataType(1)">加粗</li>
                        <li v-on:click="chooseDanhangwenbenDataType(2)">正常</li>
                      </ul>
                    </div>                    
                  </div>
                  
                </div>
              </div>
              <!-- vc-sjys-datas_end -->
              <div class="vc-sjys-datas" v-if="((currentmodule.type=='shuzitu')&&currentmodule.config.datasetbeforecontent=='-')">
                <div class="vc-dataconfig">
                  <div class="vc-colors" v-on:click.prevent.stop="">
                      <photoshop-picker  @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.widgets.style.colorStyle[0]" v-model="colors">
                      </photoshop-picker>
                      <photoshop-picker  @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.widgets.style.colorStyle[1]" v-model="colors">
                      </photoshop-picker>
                  </div>
                  <div class="vc-dataconfig-color">
                    <span >字体颜色</span>
                    <div :style="{'background':currentmodule.config.widgets.style.color}" v-on:click.stop="colorPickShow($event,'','',21,currentmodule.config.widgets.style.color)" class="colorpicker"></div>
                  </div>
                  <div class="vc-dataconfig-color">
                    <span class="vc-dataconfig-border">字体大小</span>
                    <input type="text" v-on:change="handleDanhangwenbenFontSizeChange($event)" @input="handleDanhangwenbenFontSizeInput($event)" v-model="currentmodule.config.widgets.fontSize" placeholder="请输入数字">
                  </div>
                  <div class="vc-dataconfig-color vc-dataconfig-font-weight">
                    <span class="vc-dataconfig-border vc-dataconfig-font-weight">字体粗细</span>
                    <div   class="vc-datatypechoose" type="text">
                      <div v-if="currentmodule.config.widgets.style['font-weight']=='400'"  v-on:click.stop="showDanhangwenbenDatatypeChoose">正常</div>
                      <div v-if="currentmodule.config.widgets.style['font-weight']=='600'" v-on:click.stop="showDanhangwenbenDatatypeChoose"> 加粗</div>
                      <ul class="vc-rstchoose " :style="currentmodule.config.widgets.style.fontStyle">
                        <li v-on:click="chooseDanhangwenbenDataType(1)">加粗</li>
                        <li v-on:click="chooseDanhangwenbenDataType(2)">正常</li>
                      </ul>
                    </div>                    
                  </div>
                  <!-- vc-dataconfig-font-weight_end -->
                  <div class="vc-dataconfig-color">
                    <span >块背景色</span>
                    <div :style="{'background':currentmodule.config.widgets.numBackStyle.background}" v-on:click.stop="colorPickShow($event,'','',22,currentmodule.config.widgets.numBackStyle.background)" class="colorpicker"></div>
                  </div>
                  <div class="vc-dataconfig-color">
                    <span class="vc-dataconfig-border">块左右</span>
                    <input type="text" v-on:change="handleShuzituPaddLeftChange($event)" @input="handleShuzituPaddLeftInput($event)" v-model="currentmodule.config.widgets.padding[1]" placeholder="请输入数字">
                  </div>
                  <div class="vc-dataconfig-color">
                    <span class="vc-dataconfig-border">块上下</span>
                    <input type="text" v-on:change="handleShuzituPaddTopChange($event)" @input="handleShuzituPaddTopInput($event)" v-model="currentmodule.config.widgets.padding[0]" placeholder="请输入数字">
                  </div>
                </div>
              </div>
              <!-- vc-sjys-datas_end -->
              <div class="vc-sjys-datas" v-if="(currentmodule.type=='tiaoxingtu'&&currentmodule.config.datasetbeforecontent=='-')">
                <div class="vc-dataconfig" v-for="(item,index) in currentmodule.config.params.moduledatas.style.y">
                  <div class="vc-colors" v-on:click.prevent.stop="">
                    <photoshop-picker  @input="colorPickUpdateValue" class="vc-colorpicker" :style="item.style.color[0]" v-model="colors" />
                    <photoshop-picker @input="colorPickUpdateValue" class="vc-colorpicker" :style="item.style.color[1]" v-model="colors" />
                    <photoshop-picker @input="colorPickUpdateValue" class="vc-colorpicker" :style="item.style.color[2]" v-model="colors" />
                    <photoshop-picker @input="colorPickUpdateValue" class="vc-colorpicker" :style="item.style.color[3]" v-model="colors" />
                  </div>
                  <span class="vc-dc-title">数组{{index+1}}</span><span v-on:click="delTiaoxingtuDataTypeConfigGroup(index)" class="vc-adddataconfig vc-adddataconfig-del">删除</span>
                  <div class="vc-dataconfig-color">
                    <span>填充色</span>
                    <div :style="{'background':item.areaStyle.color.colorStops[0].color}" v-on:click.stop="colorPickShow($event,index,'',8,item.areaStyle.color.colorStops[0].color)" class="colorpicker"></div>&nbsp; — &nbsp;
                    <div :style="{'background':item.areaStyle.color.colorStops[1].color}" v-on:click.stop="colorPickShow($event,index,'',9,item.areaStyle.color.colorStops[1].color)" class="colorpicker"></div>
                  </div>
                  <div class="vc-dataconfig-color">
                      <span >边线色</span>
                      <div :style="{'background':item.lineStyle.color}" v-on:click.stop="colorPickShow($event,index,'0',10,item.lineStyle.color)" class="colorpicker"></div>
                  </div>
                  <div class="vc-dataconfig-color">
                    <span >拐点色</span>
                    <div :style="{'background':item.itemStyle.normal.borderColor}" v-on:click.stop="colorPickShow($event,index,'',11,item.itemStyle.normal.borderColor)" class="colorpicker"></div>
                  </div>
                  <div class="vc-dataconfig-color">
                    <span class="vc-dataconfig-border">边线宽度</span>
                    <input type="text" v-on:change="handleTiaoxingtuBorderWidthChange($event,index)" @input="handleTiaoxingtuBorderWidthInput($event,index)" v-model="item.lineStyle.width" placeholder="请输入数字">
                  </div>
                  <div class="vc-dataconfig-color">
                    <span class="vc-dataconfig-border">拐点大小</span>
                    <input type="text" v-on:change="handleTiaoxingtuBorseSizeChange($event,index)" @input="handleTiaoxingtuBorseSizeInput($event,index)" v-model="item.symbolSize" placeholder="请输入数字">
                  </div>
                  <!-- vc-dp-item_end -->
                </div>
              </div>
              <!-- vc-sjys-datas_end -->
              <div class="vc-sjys-datas" v-if="(currentmodule.type=='jinduhuantu'&&currentmodule.config.datasetbeforecontent=='-')">
                <div class="vc-dataconfig">
                  <div class="vc-colors" v-on:click.prevent.stop="">
                    <photoshop-picker  @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.params.style.color[0]" v-model="colors" />
                    <photoshop-picker @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.params.style.color[1]" v-model="colors" />
                    <photoshop-picker @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.params.style.color[2]" v-model="colors" />
                    <photoshop-picker @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.params.style.color[3]" v-model="colors" />
                     <photoshop-picker @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.params.style.color[4]" v-model="colors" />
                  </div>
                  <div class="vc-dataconfig-color">
                    <span>环1填充</span>
                    <div :style="{'background':currentmodule.config.params.color[0]}" v-on:click.stop="colorPickShow($event,'','',13,currentmodule.config.params.color[0])" class="colorpicker"></div>
                  </div>
                  <div class="vc-dataconfig-color">
                    <span>环2填充</span>
                    <div :style="{'background':currentmodule.config.params.color[1]}" v-on:click.stop="colorPickShow($event,'','',14,currentmodule.config.params.color[1])" class="colorpicker"></div>
                  </div>
                  <div class="vc-dataconfig-color">
                      <span>边线色</span>
                      <div :style="{'background':currentmodule.config.params.style.itemStyle.borderColor}" v-on:click.stop="colorPickShow($event,'','0',15,currentmodule.config.params.style.itemStyle.borderColor)" class="colorpicker"></div>
                  </div>
                  <div class="vc-dataconfig-color">
                    <span >数字色</span>
                    <div :style="{'background':currentmodule.config.params.style.label.color}" v-on:click.stop="colorPickShow($event,'','',16,currentmodule.config.params.style.label.color)" class="colorpicker"></div>
                  </div>
                  <div class="vc-dataconfig-color">
                    <span >文字色</span>
                    <div :style="{'background':currentmodule.config.params.style.active.color}" v-on:click.stop="colorPickShow($event,'','',17,currentmodule.config.params.style.active.color)" class="colorpicker"></div>
                  </div>
                  <div class="vc-dataconfig-color">
                    <span class="vc-dataconfig-border">边线宽度</span>
                    <input type="text" v-on:change="handleJinduhuantuBorderWidthChange($event,'')" @input="handleJinduhuantuBorderWidthInput($event,'')" v-model="currentmodule.config.params.style.itemStyle.borderWidth" placeholder="请输入数字">
                  </div>
                  <div class="vc-dataconfig-color">
                    <span class="vc-dataconfig-border">数字大小</span>
                    <input type="text" v-on:change="handleJiduhuantuFontSizeChange($event,'')" @input="handleJiduhuantuFontSizeInput($event,'')" v-model="currentmodule.config.params.style.label.fontSize" placeholder="请输入数字">
                  </div>
                  <div class="vc-dataconfig-color">
                    <span class="vc-dataconfig-border">文字大小</span>
                    <input type="text" v-on:change="handleJiduhuantuTextFontSizeChange($event,'')" @input="handleJiduhuantuTextFontSizeInput($event,'')" v-model="currentmodule.config.params.style.active.fontSize" placeholder="请输入数字">
                  </div>
                  <div class="vc-dataconfig-color">
                    <span class="vc-dataconfig-border">文字行高</span>
                    <input type="text" v-on:change="handleJiduhuantuTextLineHeightChange($event,'')" @input="handleJiduhuantuTexLineHeightInput($event,'')" v-model="currentmodule.config.params.style.active.lineHeight" placeholder="请输入数字">
                  </div>
                  <!-- vc-dp-item_end -->
                </div>
              </div>
              <!-- vc-sjys-datas_end -->
              <div class="vc-sjys-datas" v-if="(currentmodule.type=='meiguitu'&&currentmodule.config.datasetbeforecontent=='-')">
                <div class="vc-dataconfig">
                  <span class="vc-dc-title">数组</span> <span v-on:click="addDataTypeConfig(index)" class="vc-adddataconfig">添加</span>
                  <div class="vc-dataconfig-color">
                    <span class="vc-dataconfig-border">内圈粗细</span>
                    <input type="text" v-model="currentmodule.config.params.style.radio[0]" v-on:change="handleMeiguituRadioInsideChange($event,indexcolor)" @input="handleMeiguituRadioInsideInput($event,indexcolor)"placeholder="请输入数字">
                  </div>
                  <div class="vc-dataconfig-color">
                    <span class="vc-dataconfig-border">外圈粗细</span>
                    <input type="text" v-model="currentmodule.config.params.style.radio[1]" v-on:change="handleMeiguituRadioOutsideChange($event,indexcolor)" @input="handleMeiguituRadioOutsideInput($event,indexcolor)"placeholder="请输入数字">
                  </div>
                  <div class="vc-dataconfig-color">
                    <span>显示图例</span>
                    <div v-if="(currentmodule.config.params.moduledatas.legend.show)" v-on:click.stop="hiddenMeiguituMenu" class="colorpicker colorpickershow"></div>
                    <div v-if="(!currentmodule.config.params.moduledatas.legend.show)" v-on:click.stop="showMeiguituMenu" class="colorpicker colorpickerhidden"></div>
                  </div>
                  <div class="vc-dp-item" v-for="(itemcolor,indexcolor) in currentmodule.config.params.style.color">
                    <span>项目{{indexcolor+1}}</span><span v-on:click="delDataTypeConfig(index,indexcolor)" class="vc-adddataconfig vc-adddataconfig-del">移除</span>
                    <div class="vc-colors" v-on:click.prevent.stop="">
                      <photoshop-picker  @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.params.color[indexcolor][0]" v-model="colors" />
                      <photoshop-picker  @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.params.color[indexcolor][1]" v-model="colors" /> 
                      <photoshop-picker  @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.params.color[indexcolor][2]" v-model="colors" />
                    </div>
                    <div class="vc-dp-item-config">
                      <div class="vc-dataconfig-color">
                        <span>填充色</span>
                        <div :style="{'background':itemcolor[0]}" v-on:click.stop="colorPickShow($event,'',indexcolor,18,itemcolor[0])" class="colorpicker"></div>&nbsp; — &nbsp;
                        <div :style="{'background':itemcolor[1]}" v-on:click.stop="colorPickShow($event,'',indexcolor,19,itemcolor[1])" class="colorpicker"></div>
                      </div>
                      <div class="vc-dataconfig-color">
                        <span>边框色</span>
                        <div  :style="{'background':itemcolor[2]}" v-on:click.stop="colorPickShow($event,'',indexcolor,20,itemcolor[2])" class="colorpicker"></div>
                      </div>
                      <div class="vc-dataconfig-color">
                        <span class="vc-dataconfig-border">边框粗细</span>
                        <input type="text" v-model="itemcolor[3]" v-on:change="handleMeiguituBorderChange($event,indexcolor)" @input="handleMeiguituBorderInput($event,indexcolor)"placeholder="请输入数字">
                      </div>
                    </div>
                    <!-- vc-dp-item-config_end -->
                  </div>
                  <!-- vc-dp-item_end -->
                </div>
              </div>
              <!-- vc-sjys-datas_end -->
              <div class="vc-sjys-datas" v-if="(currentmodule.type=='qiantaobingtu'&&currentmodule.config.datasetbeforecontent=='-')">
                <div class="vc-dataconfig-color vc-dataconfig-legendshow">
                  <span>显示图例</span>
                  <div v-if="(currentmodule.config.params.moduledatas.legend.show)" v-on:click.stop="hiddenMeiguituMenu" class="colorpicker colorpickershow"></div>
                  <div v-if="(!currentmodule.config.params.moduledatas.legend.show)" v-on:click.stop="showMeiguituMenu" class="colorpicker colorpickerhidden"></div>
                </div>
                <div class="vc-dataconfig" v-for="(item,index) in currentmodule.config.params.style">
                  <span class="vc-dc-title">数组</span> 
                  <span v-on:click="addDataTypeConfig(index)" class="vc-adddataconfig">添加</span>
                  <span v-on:click="delDataTypeConfigGroup(index)" class="vc-adddataconfig vc-adddataconfig-del">删除</span>
                  <div class="vc-dataconfig-color">
                    <span class="vc-dataconfig-border">内圈粗细</span>
                    <input type="text" v-model="currentmodule.config.params.style[index].radio[0]" v-on:change="handleQiantaobingtuRadioInsideChange($event,index)" @input="handleQiantaobingtuRadioInsideInput($event,index)"placeholder="请输入数字">
                  </div>
                  <div class="vc-dataconfig-color">
                    <span class="vc-dataconfig-border">外圈粗细</span>
                    <input type="text" v-model="currentmodule.config.params.style[index].radio[1]" v-on:change="handleQiantaobingtuRadioOutsideChange($event,index)" @input="handleQiantaobingtuRadioOutsideInput($event,index)"placeholder="请输入数字">
                  </div>
                  <div class="vc-dp-item" v-for="(itemcolor,indexcolor) in currentmodule.config.params.style[index].color">
                    <span>项目{{indexcolor+1}}</span><span v-on:click="delDataTypeConfig(index,indexcolor)" class="vc-adddataconfig vc-adddataconfig-del">移除</span>
                    <div class="vc-colors" v-on:click.prevent.stop="">
                      <photoshop-picker  @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.params.color[index][indexcolor][0]" v-model="colors" />
                      <photoshop-picker  @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.params.color[index][indexcolor][1]" v-model="colors" /> 
                      <photoshop-picker  @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.params.color[index][indexcolor][2]" v-model="colors" />
                    </div>
                    <div class="vc-dp-item-config">
                      <div class="vc-dataconfig-color">
                        <span>填充色</span>
                        <div :style="{'background':itemcolor[0]}" v-on:click.stop="colorPickShow($event,index,indexcolor,30,itemcolor[0])" class="colorpicker"></div>&nbsp; — &nbsp;
                        <div :style="{'background':itemcolor[1]}" v-on:click.stop="colorPickShow($event,index,indexcolor,31,itemcolor[1])" class="colorpicker"></div>
                      </div>
                      <div class="vc-dataconfig-color">
                        <span>边框色</span>
                        <div  :style="{'background':itemcolor[2]}" v-on:click.stop="colorPickShow($event,index,indexcolor,32,itemcolor[2])" class="colorpicker"></div>
                      </div>
                      <div class="vc-dataconfig-color">
                        <span class="vc-dataconfig-border">边框粗细</span>
                        <input type="text" v-model="itemcolor[3]" v-on:change="handleQiantaobingtuBorderChange($event,index,indexcolor)" @input="handleQiantaobingtuBorderInput($event,index,indexcolor)"placeholder="请输入数字">
                      </div>
                    </div>
                    <!-- vc-dp-item-config_end -->
                  </div>
                  <!-- vc-dp-item_end -->
                </div>
              </div>
              <!-- vc-sjys-datas_end -->
              <div class="vc-sjys-datas" v-if="(currentmodule.type=='biaoge'&&currentmodule.config.datasetbeforecontent=='-')">
                <div class="vc-dataconfig">  
                    <div class="vc-dataconfig-color">
                      <span class="vc-dataconfig-border">字体大小</span>
                      <input type="text"  v-on:change="handleBiaogeFontSizeChange($event,'')" @input="handleBiaogeFontSizeInput($event,'')"  v-model="currentmodule.config.widgets.xStyle.fontSize" placeholder="请输入数字">
                    </div>
                    <div class="vc-colors" v-on:click.prevent.stop="">
                      <photoshop-picker  @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.widgets.xStyle.colorStyle[0]" v-model="colors" />
                    </div>
                    <div class="vc-dataconfig-color">
                        <span >字体颜色</span>
                        <div :style="{'background':currentmodule.config.widgets.xStyle.color}" v-on:click.stop="colorPickShow($event,'','0',23,currentmodule.config.widgets.xStyle.color)" class="colorpicker"></div>
                    </div>
                </div><!-- vc-dataconfig_end -->
              </div>
              <!-- vc-sjys-datas_end -->

              <div class="vc-sjys-datas" v-if="(currentmodule.type=='ditu'&&currentmodule.config.datasetbeforecontent=='-')">
                <div class="vc-dataconfig"> 
                    <div class="vc-colors" v-on:click.prevent.stop="">
                      <photoshop-picker  @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.params.style.color[0]" v-model="colors" />
                      <photoshop-picker  @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.params.style.color[1]" v-model="colors" />
                      <photoshop-picker  @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.params.style.color[2]" v-model="colors" />
                      <photoshop-picker  @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.params.style.color[3]" v-model="colors" />
                      <photoshop-picker  @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.params.style.color[4]" v-model="colors" />
                      <photoshop-picker  @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.params.style.color[5]" v-model="colors" />
                    </div> 
                    <div class="vc-dataconfig-color">
                        <span >填充色</span>
                        <div :style="{'background':currentmodule.config.params.style.map.itemStyle.normal.areaColor}" v-on:click.stop="colorPickShow($event,'','0',24,currentmodule.config.params.style.map.itemStyle.normal.areaColor)" class="colorpicker"></div>
                    </div>
                    <div class="vc-dataconfig-color">
                        <span >边界色</span>
                        <div :style="{'background':currentmodule.config.params.style.map.itemStyle.normal.borderColor}" v-on:click.stop="colorPickShow($event,'','0',25,currentmodule.config.params.style.map.itemStyle.normal.borderColor)" class="colorpicker"></div>
                    </div>
                    <!-- <div class="data_split"></div> -->
                    <div class="vc-dataconfig-color">
                        <span >字体色</span>
                        <div :style="{'background':currentmodule.config.params.style.effectScatter.label.normal.color}" v-on:click.stop="colorPickShow($event,'','0',26,currentmodule.config.params.style.effectScatter.label.normal.color)" class="colorpicker"></div>
                    </div>
                    <div class="vc-dataconfig-color">
                        <span >大圈色</span>
                        <div :style="{'background':currentmodule.config.params.style.effectScatter.itemStyle.normal.color}" v-on:click.stop="colorPickShow($event,'','0',27,currentmodule.config.params.style.effectScatter.itemStyle.normal.color)" class="colorpicker"></div>
                    </div>
                    <div class="vc-dataconfig-color">
                        <span >大圈阴影</span>
                        <div :style="{'background':currentmodule.config.params.style.effectScatter.itemStyle.normal.shadowColor}" v-on:click.stop="colorPickShow($event,'','0',28,currentmodule.config.params.style.effectScatter.itemStyle.normal.shadowColor)" class="colorpicker"></div>
                    </div>
                    <div class="vc-dataconfig-color">
                        <span >小圈色</span>
                        <div :style="{'background':currentmodule.config.params.style.scatter.itemStyle.normal.color}" v-on:click.stop="colorPickShow($event,'','0',29,currentmodule.config.params.style.scatter.itemStyle.normal.color)" class="colorpicker"></div>
                    </div>
                </div><!-- vc-dataconfig_end -->
              </div>
              <!-- vc-sjys-datas_end -->
            </div>
            <!-- vc-sjys_end -->
            <div class="vc-sjys vc-xaxios"  v-if="(currentmodule.type=='jichuzhuzhuangtu'||currentmodule.type=='caisezhuzhuangtu'||currentmodule.type=='duidiezhuzhuangtu'||currentmodule.type=='jiaocuozhengfuzhoubiaoqiantu'||currentmodule.type=='tiaoxingtu')">
              <div class="vc-sjys-title"> 
                <span v-on:click.stop="xAxisHidden" :data-before="currentmodule.config.xAxiosbeforecontent" class="vc-dc-title">x轴</span>
              </div>
              <div class="vc-sjys-datas" v-if="(currentmodule.config.xAxiosbeforecontent=='-'&&currentmodule.config.datas)">
                  <div class="vc-colors" v-on:click.prevent.stop="">
                    <photoshop-picker  @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.params.xAxis.labelStyle" v-model="colors" />
                    <photoshop-picker @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.params.xAxis.lineStyle" v-model="colors" />
                  </div>
                  <div class="vc-dataconfig-color">
                      <span >轴线色</span>
                      <div :style="{'background':currentmodule.config.params.xAxis.axisLine.lineStyle.color}" v-on:click.stop="colorPickShow($event,'','0',4,currentmodule.config.params.xAxis.axisLine.lineStyle.color)" class="colorpicker"></div>
                  </div>
                  <div class="vc-dataconfig-color">
                    <span class="vc-dataconfig-border">轴线粗细</span>
                    <input type="text" v-on:change="handlexAxiaWidthChange($event,'')" @input="handlexAxiaWidthInput($event,'')" v-model="currentmodule.config.params.xAxis.axisLine.lineStyle.width" placeholder="请输入数字">
                  </div>
                  <div class="vc-dataconfig-color">
                      <span >字色</span>
                      <div :style="{'background':currentmodule.config.params.xAxis.axisLabel.color}" v-on:click.stop="colorPickShow($event,'','0',5,currentmodule.config.params.xAxis.axisLabel.color)" class="colorpicker"></div>
                  </div>
                  <div class="vc-dataconfig-color">
                    <span class="vc-dataconfig-border">字体大小</span>
                    <input type="text"  v-on:change="handlexAxisFontSizeChange($event,'')" @input="handlexAxisFontSizeInput($event,'')"  v-model="currentmodule.config.params.xAxis.axisLabel.fontSize" placeholder="请输入数字">
                  </div>
              </div>
              <!-- vc-sjys-datas_end -->
            </div>
            <div class="vc-sjys vc-xaxios" v-if="(currentmodule.type=='jichuzhuzhuangtu'||currentmodule.type=='caisezhuzhuangtu'||currentmodule.type=='duidiezhuzhuangtu'||currentmodule.type=='jiaocuozhengfuzhoubiaoqiantu'||currentmodule.type=='tiaoxingtu')">
              <div class="vc-sjys-title"> 
                <span v-on:click.stop="yAxisHidden" :data-before="currentmodule.config.yAxiosbeforecontent" class="vc-dc-title">y轴</span>
              </div>
              <div class="vc-sjys-datas" v-if="(currentmodule.config.yAxiosbeforecontent=='-'&&currentmodule.config.datas)">
                  <div class="vc-colors" v-on:click.prevent.stop="">
                    <photoshop-picker  @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.params.yAxis.labelStyle" v-model="colors" />
                    <photoshop-picker @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.params.yAxis.lineStyle" v-model="colors" />
                    <photoshop-picker @input="colorPickUpdateValue" class="vc-colorpicker" :style="currentmodule.config.params.yAxis.spliteStyle" v-model="colors" />
                  </div>
                  <div class="vc-dataconfig-color">
                      <span >轴线色</span>
                      <div :style="{'background':currentmodule.config.params.yAxis.axisLine.lineStyle.color}" v-on:click.stop="colorPickShow($event,'','0',6,currentmodule.config.params.yAxis.axisLine.lineStyle.color)" class="colorpicker"></div>
                  </div>
                  <div class="vc-dataconfig-color">
                    <span class="vc-dataconfig-border">轴线粗细</span>
                    <input type="text"  v-on:change="handleyAxiaWidthChange($event,'')" @input="handleyAxiaWidthInput($event,'')" v-model="currentmodule.config.params.yAxis.axisLine.lineStyle.width" placeholder="请输入数字">
                  </div>
                  <div class="vc-dataconfig-color">
                      <span >字色</span>
                      <div :style="{'background':currentmodule.config.params.yAxis.axisLabel.color}" v-on:click.stop="colorPickShow($event,'','0',7,currentmodule.config.params.yAxis.axisLabel.color)" class="colorpicker"></div>
                  </div>
                  <div class="vc-dataconfig-color">
                    <span class="vc-dataconfig-border">字体大小</span>
                    <input type="text" v-on:change="handleyAxisFontSizeChange($event,'')" @input="handleyAxisFontSizeInput($event,'')" v-model="currentmodule.config.params.yAxis.axisLabel.fontSize" placeholder="请输入数字">
                  </div>
                  <div class="vc-dataconfig-color">
                      <span >分割线色</span>
                      <div :style="{'background':currentmodule.config.params.yAxis.splitLine.lineStyle.color}" v-on:click.stop="colorPickShow($event,'','0',12,currentmodule.config.params.yAxis.splitLine.lineStyle.color)" class="colorpicker"></div>
                  </div>
              </div>
              <!-- vc-sjys-datas_end -->
            </div>
            <div class="vc-datatype" v-if="(currentmodule.config.datas)">
              <span>数据类型</span><div v-on:click.stop="showDatatypeChoose" class="vc-datatypechoose" type="text">{{defaultsettings.datatypestyle.name}}</div>
              <ul class="vc-rstchoose" :style="defaultsettings.datatypestyle.style">
                <li v-on:click="chooseDataType(1)">静态数据</li>
                <li v-on:click="chooseDataType(2)">API</li>
              </ul>
              <div class="vc-data" v-if="(currentmodule.config.datastype=='default')">
                <editor  @init="editorInit"  :config = "currentmodule.editorconfig"  @input= "aceChange" v-model="currentmodule.config.widgetdata" lang="json" theme="monokai" width="100%" height="300"></editor>
              </div>
              <div class="vc-data-api" v-if="(currentmodule.config.datastype=='api')">
                <div class="vc-dp-item">
                  <span>API地址</span><input v-on:change="apiChange($event)" v-model="currentmodule.config.api" type="text" placeholder="请求接口地址">
                </div>
                <div class="vc-dp-item vc-dp-itemreqt">
                  <span>请求方式</span>
                  <div class="vc-dp-rqt"  v-on:click.stop="showAPItypeChoose">{{currentmodule.config.apitypeselect}}</div>
                  <ul class="vc-dp-rqt-choose" :style="currentmodule.apitype">
                    <li v-on:click="chooseAPIType(1)">GET</li>
                    <li v-on:click="chooseAPIType(2)">POST</li>
                  </ul>
                </div>
                <div class="vc-dp-item">
                  <span>自动更新</span>
                   <RadioGroup v-on:on-change="autoDataChange" @click.stop.native="" class="vc-dp-itemauto" v-model="currentmodule.config.autodata">
                      <Radio label="开启"></Radio>
                      <Radio label="关闭"></Radio>
                  </RadioGroup>
                </div>
                <div class="vc-dp-item">
                  <span>更新时间</span><input v-on:change="updateTimeChange($event)" v-model="currentmodule.config.autodatatime" type="text" placeholder="单位/s">
                </div>
                <!-- <div class="vc-dp-item" >
                  <span>颜色选取</span>
                  <div class="colorpicker"></div>
                  <photoshop-picker class="vc-colorpicker" style="" v-model="colors" />
                </div> -->
                
              </div>
            </div>
          </div>
          <!-- vc-container_end -->
      </div>
      <!-- view-config_end -->
      <div id="view-bottom">
          <Slider v-on:on-input="sliderChange" :min="1" class="view-slider" v-model="modules.radiodata" :tip-format="radioFormat"></Slider>
      </div>
      <!-- view-bottom_end -->
      <div id="datasetting" :style="defaultsettings.style" v-on:click="defaultHidden">
          <div class="ds-item ds-title">
            <div class="ds-titlename">
              大屏标题
            </div>
            <div class="ds-titlecontent">
              <input maxlength="50" v-on:change="titleChange($event)" v-model="defaultsettings.title" type="text" placeholder="请在此输入大屏标题">
            </div>
          </div>
          <div class="ds-item ds-size">
            <div class="ds-titlename">
              大屏尺寸
            </div>
            <div class="ds-sizewidth">
              <span>宽度</span><input v-model="modules.defaulestyle.width" @input="handleWidthInput($event)"  type="text" placeholder="大屏宽度">
            </div>
            <div class="ds-sizeheight">
              <span>高度</span><input v-model="modules.defaulestyle.height"  @input="handleHeightInput($event)" type="text"  placeholder="大屏高度">
            </div>
          </div>
          <div class="ds-item ds-resizetype">
            <div class="ds-titlename">
              缩放方式
            </div>
            <div class="ds-titlecontent" v-on:click.stop="showResizeType">
                {{defaultsettings.resizetypename}}
            </div>
            <ul class="ds-rstchoose" :style="defaultsettings.resizetypestyle">
              <li v-on:click="chooseResizeType(0)">全屏等比缩放(大屏/PC)</li>
              <li v-on:click="chooseResizeType(1)">按高度适配(横向滚动)</li>
              <li v-on:click="chooseResizeType(2)">按宽度适配(移动端)</li>
            </ul>
          </div>
          <div class="ds-item ds-background">
            <div class="ds-titlename">
              大屏背景
            </div>
            <div class="ds-bkg-file">
              <div class="ds-bkg-img">
                <img :src="defaultsettings.src">
              </div>
              <input ref="referenceUpload" v-on:change="backGroundChange" type="file" accept="image/*" class="ds-upload-input">
              <div class="ds-bkg-file-choose" :style="defaultsettings.choosestyle">
                <i class="ivu-icon ivu-icon-ios-cloud-upload" style="font-size: 52px; color: rgb(51, 153, 255);"></i>
                <p>点击选择背景图片</p>
              </div>
              <div class="ds-bkg-clearn" v-on:click="clearnBackGround" :style="defaultsettings.clearnstyle">
                 <i class="ivu-icon ivu-icon-md-brush" style="font-size: 52px; color: rgb(51, 153, 255);"></i>
                <p>删除背景</p>
              </div>
            </div>            
          </div>
          <!-- ds-background_end -->
      </div>
      <!-- datasetting_end -->
    </div>
    <!-- view-container_end -->
    <div class="message-confirm" :style="message.style">
        <div class="message-container">
          <h3>删除组件</h3>
          <p>确定要删除吗？</p>
          <div class="confirm">
            <span v-on:click="moduleDelete">确定</span>
            <span v-on:click="moduleDeleteCancel">取消</span>
          </div>
        </div>
    </div>
  </div>
</template>
<script>
  var echarts = require('echarts');
  // 引入柱状图
  require('echarts/lib/chart/bar');
  // 引入提示框和标题组件
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');

  var editors =  require('vue2-ace-editor');
  import 'echarts/map/js/china'
  import { Sketch } from 'vue-color'
  import { mapActions } from 'vuex'
  import moduledata from '@/store/module/moduledata'
  import moduledefault from '@/store/module/moduledefault'
  import config from '@/config'
  // 截图上传已经修改了toPng的源码，加入了scale的判断
  import domtoimage from 'dom-to-image';

  export default {
    name: 'imgeditor',
    components:{
      editor: editors,
      'photoshop-picker': Sketch,
    },
    data () {
      return {
        moduledata:moduledata,
        colors:"#fff",
        msg: '',
        imgtype:"",
        config:config,
        message:{
          style:{
            display:"none"
          }
        },
        currentmodule:{
          datatypeset:{ //数据样式保存当前点击的哪个颜色块
            index:"",
            indexcolor:"",
            num:""
          },
          content:"",//编辑器数据内容
          type:"",//组件类型
          apitype:{
            display:"none" //api下拉框是否展开
          },
          config:{
            imgsrc:"",
            chart:false, //是否是百度地图组件
            img:true,//是否是图片组件
            datas:false,//是否需要数据支撑
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            autodatatime:"10",
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:{},
            defaultdata:""
          },
          editorconfig:{ //编辑器配置
            theme:"monokai",
            lang:"json",
            enableEmmet:true
          },
          id:"",
          name:"",
          width:"",
          height:"",
          left:"",
          top:"",
          zindex:""
        },
        // 大屏设置
        defaultsettings:{
          style:{
            width:"",
            height:"",
            display:"none"
          },
          // 菜单样式
          menustyle:{
            left:"10px",
            top:"10px",
            display:"none"
          },
          title:"测试模板",
          viewconfigstyle:{
            display:"none"
          },
          filename:"",
          src:"",//背景图
          headimg:"",//缩略图
          resizetype:1,
          resizetypename:"全屏等比缩放(大屏/PC)",
          // 清除背景图
          clearnstyle:{
            display:"none"
          },
          // 图片选择
          srcchoosestyle:{
            display:""
          },
          // 缩放方式选择
          resizetypestyle:{
            display:"none"
          },
          // 数据请求方式
          datatypestyle:{
            style:{
              display:"none"
            },
            name:"静态数据"
          },
           // 选择背景图
          choosestyle:{
            display:""
          }
        },
        // 可供选择的选项
        modules:{
          radiodata:100,
          radio:1,
          // 大屏默认宽高
          defaulestyle:{
            width:"",
            height:""
          },
          moduleid:"",
          imgstyleright:{
              right:"0px"
          },
          // 缩放的比例
          imgstyle:{
              "background-size": "100% 100%",
              "background-repeat":"no-repeat",
              "background-image":"",
              top:"0",
              left:"0",
              right:"0px"
          },
          // canvas栅格样式
          gridstype:{
            display:"none",
            opacity:0.3
          },
          style:{
            display:"none"
          },
          modulesource:[]
        },
        // 所有的组件选项
        modulessource:[
          {
            id:"jichu",
            type:"",
            img:require('../../assets/imgs/3.png'),
            name:"统计组件",
            modules:[
              { 
                type:"jichuzhuzhuangtu",
                name:"基础柱状图",
                id:"1",
                src:require("../../assets/imgs/15.png"),
                data:{}
              },{ 
                type:"caisezhuzhuangtu",
                name:"彩色柱状图",
                id:"2",
                src:require("../../assets/imgs/2.png"),
                data:{}
              },
              { 
                type:"duidiezhuzhuangtu",
                name:"堆叠柱状图",
                id:"11",
                src:require("../../assets/imgs/15.png"),
                data:{}
              },
              { 
                type:"jiaocuozhengfuzhoubiaoqiantu",
                name:"交错标签图",
                id:"12",
                src:require("../../assets/imgs/15.png"),
                data:{}
              },
              { 
                type:"qiantaobingtu",
                name:"嵌套饼图",
                id:"13",
                src:require("../../assets/imgs/15.png"),
                data:{}
              },
              { 
                type:"tiaoxingtu",
                name:"条形图",
                id:"3",
                src:require("../../assets/imgs/16.png"),
                data:{}
              },
              { 
                type:"tupian",
                name:"图片",
                id:"4",
                src:require("../../assets/imgs/13.png"),
                data:{}
              },
              { 
                type:"jinduhuantu",
                name:"进度环图",
                id:"5",
                src:require("../../assets/imgs/1.png"),
                data:{}
              },
              { 
                type:"meiguitu",
                name:"玫瑰图",
                id:"6",
                src:require("../../assets/imgs/17.png"),
                data:{}
              }
            ]
          },{
            id:"ditu",
            type:"ditu",
            img:require('../../assets/imgs/20.png'),
            name:"地图组件",
            modules:[
              { 
                type:"dituzujian",
                name:"地图",
                id:"7",
                src:require("../../assets/imgs/14.png"),
                data:{}
              }
            ]
          },{
            id:"wenzi",
            type:"wenzi",
            img:require('../../assets/imgs/19.png'),
            name:"文字组件",
            modules:[
              { 
                type:"danhangwenben",
                name:"单行文本",
                id:"8",
                src:require("../../assets/imgs/18.png"),
                data:{}
              },{ 
                type:"biaoge",
                name:"表格",
                id:"9",
                src:require("../../assets/imgs/21.png"),
                data:{}
              },{ 
                type:"shuzitu",
                name:"数字图",
                id:"10",
                src:require("../../assets/imgs/22.png"),
                data:{}
              }
            ]
          },
        ],
        imgmodules:[
        ], //保存每个组件的信息，包括id等
        zooms:{
          show:false, //是否展示遮罩拖拽层
          resize:false, //是否缩放，缩放模式，防止点击事件和mousedown事件冲突
          ctrenter:false,//ctr按键是否按下,多选模式
          type:"",//拖拽缩放时候的类型，总共8个，left,top,right,bottom...
          style:{
            width:"",
            height:"",
            top:"",
            left:""
          },//拖拽组件的样式保存
        }
      }
    },
    created(){
      var _self = this;
      document.onkeydown = function(e){
          var key = window.event.keyCode;
          if(key == 17){
              _self.ctrEnterDowm();
          }
      }
      document.onkeyup = function(e){
          var key = window.event.keyCode;
          if(key == 17){
              _self.ctrEnterUp();
          }
      }
    },
    // watch: {
    //   imgmodules:{
    //     deep: true,
    //     handler: function (newVal,oldVal){
    //         this.editModules();
    //     }
    //   }
    // },
    mounted:function(){
      let moduleid = this.$route.query.id||"";
      this.modules.moduleid = moduleid;
      this.moduleContent();
      this.drawGrid("#eee",1920,1080);
      window.onresize = () => {
        this.changeWindow();
      }
      window.oncontextmenu = function(){return false;}
    },
    destroyed(){
      for (let i = 0; i < this.imgmodules.length; i++) {
        clearInterval(this.imgmodules[i].config.time);
      }
    },
    methods:{
      ...mapActions([
          'moduleMessage',
          'fileUpload',
          'editModule',
          'ajax'
      ]),
      hiddenMeiguituMenu(){
        this.currentmodule.config.params.moduledatas.legend.show = false;
        this.reJichuzhuzhuangtuChart();
      },
      showMeiguituMenu(){
        this.currentmodule.config.params.moduledatas.legend.show = true;
        this.reJichuzhuzhuangtuChart();
      },
      yAxisHidden(){
        if (this.currentmodule.config.yAxiosbeforecontent == "+") {
          this.currentmodule.config.yAxiosbeforecontent = "-";
        }else{
          this.currentmodule.config.yAxiosbeforecontent = "+";
        }
      },
      xAxisHidden(){
        if (this.currentmodule.config.xAxiosbeforecontent == "+") {
          this.currentmodule.config.xAxiosbeforecontent = "-";
        }else{
          this.currentmodule.config.xAxiosbeforecontent = "+";
        }
      },
      dataSetHidden(){
        if (this.currentmodule.config.datasetbeforecontent == "+") {
          this.currentmodule.config.datasetbeforecontent = "-";
        }else{
          this.currentmodule.config.datasetbeforecontent = "+";
        }
      },
      // 新的分组里头另外增加组件
      addDataTypeConfig(index){
        if (this.currentmodule.type=="jichuzhuzhuangtu") {
          var currenty = this.currentmodule.config.params.moduledatas.style.y[index]
          var ystyle = JSON.parse(JSON.stringify(this.moduledata.state.jichuzhuzhuangtu))
          currenty.color.push(ystyle.style.y[0].color[0])
          currenty.style.color.push(ystyle.style.y[0].style.color[0])
          this.reJichuzhuzhuangtuChart();
        }
        if (this.currentmodule.type=="caisezhuzhuangtu") {
          var currenty = this.currentmodule.config.params.moduledatas.style.y[index]
          var ystyle = JSON.parse(JSON.stringify(this.moduledata.state.caisezhuzhuangtu))
          currenty.color.push(ystyle.style.y[0].color[0])
          currenty.style.color.push(ystyle.style.y[0].style.color[0])
          this.reJichuzhuzhuangtuChart();
        }
        if (this.currentmodule.type=="duidiezhuzhuangtu") {
          var currenty = this.currentmodule.config.params.moduledatas.style.y[index]
          var ystyle = JSON.parse(JSON.stringify(this.moduledata.state.duidiezhuzhuangtu))
          currenty.color.push(ystyle.style.y[0].color[0])
          currenty.style.color.push(ystyle.style.y[0].style.color[0])
          this.reJichuzhuzhuangtuChart();
        }
        if (this.currentmodule.type=="qiantaobingtu") {
          var currenty = this.currentmodule.config.params.style[index];
          var colortype = this.currentmodule.config.params.color[index];
          var ystyle = JSON.parse(JSON.stringify(this.moduledata.state.qiantaobingtu))
          colortype.push(ystyle.color[0][0]);
          currenty.color.push(ystyle.style[0].color[0]);
          this.reJichuzhuzhuangtuChart();
        }
        if (this.currentmodule.type=="jiaocuozhengfuzhoubiaoqiantu") {
          var currenty = this.currentmodule.config.params.moduledatas.style.y[index]
          var ystyle = JSON.parse(JSON.stringify(this.moduledata.state.jiaocuozhengfuzhoubiaoqiantu))
          currenty.color.push(ystyle.style.y[0].color[0])
          currenty.style.color.push(ystyle.style.y[0].style.color[0])
          this.reJichuzhuzhuangtuChart();
        }
        if (this.currentmodule.type=="meiguitu") {
          var params = this.currentmodule.config.params;
          var meiguitu = JSON.parse(JSON.stringify(this.moduledata.state.meiguitu))
          params.style.color.push(meiguitu.style.color[0]);
          params.color.push(meiguitu.color[0])
          this.reJichuzhuzhuangtuChart();
        }
      },
      // 新的分组里头另外删除组件
      delDataTypeConfig(index,indexcolor){
        if (this.currentmodule.type=="jichuzhuzhuangtu"||this.currentmodule.type=="caisezhuzhuangtu"||this.currentmodule.type=="duidiezhuzhuangtu"||this.currentmodule.type=="jiaocuozhengfuzhoubiaoqiantu") {
          var currenty = this.currentmodule.config.params.moduledatas.style.y[index]
          currenty.color.splice(indexcolor,1);
          currenty.style.color.splice(indexcolor,1)
          this.reJichuzhuzhuangtuChart();
        }

        if (this.currentmodule.type=="meiguitu") {
          var currenty = this.currentmodule.config.params.style;
          currenty.color.splice(indexcolor,1);
          this.currentmodule.config.params.color.splice(indexcolor,1);
          this.reJichuzhuzhuangtuChart();
        }
        if (this.currentmodule.type=="qiantaobingtu") {
          var currenty = this.currentmodule.config.params.style[index];
          var colortype = this.currentmodule.config.params.color[index];
          currenty.color.splice(indexcolor,1);
          colortype.splice(indexcolor,1);
          this.reJichuzhuzhuangtuChart();
        }

      },
      delTiaoxingtuDataTypeConfigGroup(index){
         var currenty = this.currentmodule.config.params.moduledatas.style.y;
          currenty.splice(index,1);
          this.reJichuzhuzhuangtuChart();
      },
      // 删除数组分组
      delDataTypeConfigGroup(index){
        if (this.currentmodule.type=="jichuzhuzhuangtu"||this.currentmodule.type=="caisezhuzhuangtu"||this.currentmodule.type=="duidiezhuzhuangtu"||this.currentmodule.type=="jiaocuozhengfuzhoubiaoqiantu") {
          var currenty = this.currentmodule.config.params.moduledatas.style.y;
          currenty.splice(index,1);
          this.reJichuzhuzhuangtuChart();
        }
        if (this.currentmodule.type=="qiantaobingtu") {
          var currenty = this.currentmodule.config.params.style;
          currenty.splice(index,1);
          this.reJichuzhuzhuangtuChart();
        }
      },
      // 添加新的分组
      addDataTypeConfigGroup(){
        this.currentmodule.config.datasetbeforecontent = "-";
        if (this.currentmodule.type=="jichuzhuzhuangtu") {
          var ystyle = JSON.parse(JSON.stringify(this.moduledata.state.jichuzhuzhuangtu))
          this.currentmodule.config.params.moduledatas.style.y.push(ystyle.style.y[0]);
          this.reJichuzhuzhuangtuChart();
        }else if (this.currentmodule.type=="caisezhuzhuangtu") {
          var ystyle = JSON.parse(JSON.stringify(this.moduledata.state.caisezhuzhuangtu))
          this.currentmodule.config.params.moduledatas.style.y.push(ystyle.style.y[0]);
          this.reJichuzhuzhuangtuChart();
        }else if (this.currentmodule.type=="duidiezhuzhuangtu") {
          var ystyle = JSON.parse(JSON.stringify(this.moduledata.state.duidiezhuzhuangtu))
          this.currentmodule.config.params.moduledatas.style.y.push(ystyle.style.y[0]);
          this.reJichuzhuzhuangtuChart();
        }else if (this.currentmodule.type=="qiantaobingtu") {
          var ystyle = JSON.parse(JSON.stringify(this.moduledata.state.qiantaobingtu))
          this.currentmodule.config.params.style.push(ystyle.style[0]);
          this.reJichuzhuzhuangtuChart();
        }else if (this.currentmodule.type=="jiaocuozhengfuzhoubiaoqiantu") {
          var ystyle = JSON.parse(JSON.stringify(this.moduledata.state.jiaocuozhengfuzhoubiaoqiantu))
          this.currentmodule.config.params.moduledatas.style.y.push(ystyle.style.y[0]);
          this.reJichuzhuzhuangtuChart();
        }else if (this.currentmodule.type=="tiaoxingtu") {
          var ystyle = JSON.parse(JSON.stringify(this.moduledata.state.tiaoxingtu))
          this.currentmodule.config.params.moduledatas.style.y.push(ystyle.style.y[0]);
          this.reJichuzhuzhuangtuChart();
        }
      },
      colorPickUpdateValue(val){
        let index = this.currentmodule.datatypeset.index;
        let indexcolor = this.currentmodule.datatypeset.indexcolor;
        let num = this.currentmodule.datatypeset.num;
        
        let value = "rgba("+val.rgba.r+","+val.rgba.g+","+val.rgba.b+","+val.rgba.a+")";
       
        if (num==0) {
          let currenty = this.currentmodule.config.params.moduledatas.style.y[index];
          currenty.color[indexcolor][0]=value;
        }else if (num==1){
          let currenty = this.currentmodule.config.params.moduledatas.style.y[index];
          currenty.color[indexcolor][1]=value;
        }else if (num==2){
          let currenty = this.currentmodule.config.params.moduledatas.style.y[index];
          currenty.borderColor=value;
        }else if (num==3){
          let currenty = this.currentmodule.config.params.moduledatas.style.y[index];
          currenty.label.color = value;
        }else if (num==4){
           let currentxAxis = this.currentmodule.config.params.xAxis;
           currentxAxis.axisLine.lineStyle.color = value;
        }else if (num==5){
          let currentxAxis = this.currentmodule.config.params.xAxis;
          currentxAxis.axisLabel.color = value;
        }else if (num==6){
          let currentyAxis = this.currentmodule.config.params.yAxis;
          currentyAxis.axisLine.lineStyle.color = value;
        }else if (num==7){
          let currentyAxis = this.currentmodule.config.params.yAxis;
          currentyAxis.axisLabel.color = value;
        }else if (num==8){
          let currenty = this.currentmodule.config.params.moduledatas.style.y[index];
          currenty.areaStyle.color.colorStops[0].color = value;
        }else if (num==9){
          let currenty = this.currentmodule.config.params.moduledatas.style.y[index];
          currenty.areaStyle.color.colorStops[1].color = value;
        }else if (num==10){
          let currenty = this.currentmodule.config.params.moduledatas.style.y[index];
          currenty.lineStyle.color = value;
        }else if (num==11){
          let currenty = this.currentmodule.config.params.moduledatas.style.y[index];
          currenty.itemStyle.normal.borderColor = value;
        }else if (num==12){
          let currentyAxis = this.currentmodule.config.params.yAxis;
          currentyAxis.splitLine.lineStyle.color = value;
        }else if (num==13){
          this.currentmodule.config.params.color[0] = value;
        }else if (num==14){
          this.currentmodule.config.params.color[1] = value;
        }else if (num==15){
          this.currentmodule.config.params.style.itemStyle.borderColor = value;
        }else if (num==16){
          this.currentmodule.config.params.style.label.color = value;
        }else if (num==17){
          this.currentmodule.config.params.style.active.color = value;
        }else if (num==18){
          this.currentmodule.config.params.style.color[indexcolor][0] = value;
        }else if (num==19){
          this.currentmodule.config.params.style.color[indexcolor][1] = value;
        }else if (num==20){
          this.currentmodule.config.params.style.color[indexcolor][2] = value;
        }else if (num==21){
          this.currentmodule.config.widgets.style.color = value;
        }else if (num==22){
          this.currentmodule.config.widgets.numBackStyle.background = value;
        }else if (num==23){
          this.currentmodule.config.widgets.xStyle.color = value;
        }else if (num==24){
          this.currentmodule.config.params.style.map.itemStyle.normal.areaColor = value;
        }else if (num==25){
          this.currentmodule.config.params.style.map.itemStyle.normal.borderColor = value;
        }else if (num==26){
          this.currentmodule.config.params.style.effectScatter.label.normal.color = value;
        }else if (num==27){
          this.currentmodule.config.params.style.effectScatter.itemStyle.normal.color = value;
        }else if (num==28){
          this.currentmodule.config.params.style.effectScatter.itemStyle.normal.shadowColor = value;
        }else if (num==29){
          this.currentmodule.config.params.style.scatter.itemStyle.normal.color = value;
        }else if (num==30){
          this.currentmodule.config.params.style[index].color[indexcolor][0] = value;
        }else if (num==31){
          this.currentmodule.config.params.style[index].color[indexcolor][1] = value;
        }else if (num==32){
          this.currentmodule.config.params.style[index].color[indexcolor][2] = value;
        }
        this.reJichuzhuzhuangtuChart();
      },
      // 刷新页面数据以及样式
      reJichuzhuzhuangtuChart(){
        if (this.currentmodule.type=="jichuzhuzhuangtu") {
          this.reJichuzhuzhuangtu("",this.currentmodule.id);
        }else if (this.currentmodule.type=="caisezhuzhuangtu") {
          this.reCaisezhuzhuangtu("",this.currentmodule.id);
        }else if (this.currentmodule.type=="duidiezhuzhuangtu") {
          this.reDuidiezhuzhuangtu("",this.currentmodule.id);
        }else if (this.currentmodule.type=="jiaocuozhengfuzhoubiaoqiantu") {
          this.reJiaocuozhengfuzhoubiaoqiantu("",this.currentmodule.id);
        }else if (this.currentmodule.type=="qiantaobingtu") {
          this.reQiantaobingtu("",this.currentmodule.id);
        }else if (this.currentmodule.type=="tiaoxingtu") {
          this.reTiaoxingtu("",this.currentmodule.id);
        }else if (this.currentmodule.type=="jinduhuantu") {
          this.reJinduhuantu("",this.currentmodule.id);
        }else if (this.currentmodule.type=="meiguitu") {
          this.reMeiGuitu("",this.currentmodule.id);
        }else if (this.currentmodule.type=="danhangwenben") {
          this.reDanhangwenben("",this.currentmodule.id);
        }else if (this.currentmodule.type=="shuzitu") {
          this.reShuzitu("",this.currentmodule.id);
        }else if(this.currentmodule.type=="ditu"){
          this.reDitu("",this.currentmodule.id);
        }

        this.$nextTick(() => {
          if (this.currentmodule.config.datas&&this.currentmodule.config.chart&&this.currentmodule.type!="danhangwenben") {
              var myChart = echarts.init(document.getElementById(this.currentmodule.id));
              this.currentmodule.chart = myChart;
              myChart.setOption(this.currentmodule.config.widgets,true);
              myChart.resize();
          }   
        })
      },
      // 玫瑰图外圈大小改变
      handleMeiguituRadioOutsideChange(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currenty = this.currentmodule.config.params;
        currenty.style.radio[1] = (val >= 100000||val <= 0)  ? 50 : val;
        this.reJichuzhuzhuangtuChart();
      },
      handleMeiguituRadioOutsideInput(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currenty = this.currentmodule.config.params;
        currenty.style.radio[1] = (val >= 100000||val <= 0)  ? 50 : val;
      },
      // 嵌套饼图修改内圈大小
      handleQiantaobingtuRadioInsideChange(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currenty = this.currentmodule.config.params;
        currenty.style[index].radio[0] = (val >= 100000||val < 0)  ? 50 : val;
        this.reJichuzhuzhuangtuChart();
      },
      handleQiantaobingtuRadioInsideInput(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currenty = this.currentmodule.config.params;
        currenty.style[index].radio[0] = (val >= 100000||val < 0)  ? 50 : val;
      },
      // 嵌套饼图修改外圈大小
      handleQiantaobingtuRadioOutsideChange(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currenty = this.currentmodule.config.params;
        currenty.style[index].radio[1] = (val >= 100000||val <= 0)  ? 50 : val;
        this.reJichuzhuzhuangtuChart();
      },
      handleQiantaobingtuRadioOutsideInput(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currenty = this.currentmodule.config.params;
        currenty.style[index].radio[1] = (val >= 100000||val <= 0)  ? 50 : val;
      },
      // 玫瑰图外圈大小改变
      handleMeiguituRadioInsideChange(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currenty = this.currentmodule.config.params;
        currenty.style.radio[0] = (val >= 100000||val <= 0)  ? 50 : val;
        this.reJichuzhuzhuangtuChart();
      },
      handleMeiguituRadioInsideInput(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currenty = this.currentmodule.config.params;
        currenty.style.radio[0] = (val >= 100000||val <= 0)  ? 50 : val;
      },
      handleMeiguituBorderChange(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currenty = this.currentmodule.config.params;
        currenty.style.color[index][3] = (val >= 10000||val <= 0)  ? 0 : val;
        this.reJichuzhuzhuangtuChart();
      },
      handleMeiguituBorderInput(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currenty = this.currentmodule.config.params;
        currenty.style.color[index][3] = (val >= 10000||val <= 0)  ? 0 : val;
      },
      handleQiantaobingtuBorderChange(e,index,indexcolor){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currenty = this.currentmodule.config.params;
        currenty.style[index].color[indexcolor][3] = (val >= 10000||val <= 0)  ? 0 : val;
        this.reJichuzhuzhuangtuChart();
      },
      handleQiantaobingtuBorderInput(e,index,indexcolor){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currenty = this.currentmodule.config.params;
        currenty.style[index].color[indexcolor][3] = (val >= 10000||val <= 0)  ? 0 : val;
      },
      // 柱状图柱子宽度修改
      handleBarWidthChange(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currenty = this.currentmodule.config.params.moduledatas.style.y[index];
        currenty.barWidth = (val >= 10000||val <= 0)  ? 50 : val;
        this.reJichuzhuzhuangtuChart();
      },
      handleJiduhuantuTextLineHeightChange(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var style= this.currentmodule.config.params.style;
        style.active.lineHeight = (val >= 10000||val<=0)  ? 0 : val;
        this.reJichuzhuzhuangtuChart();
      },
      handleJiduhuantuTexLineHeightInput(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var style= this.currentmodule.config.params.style;
        style.active.lineHeight = (val >= 10000||val<=0)  ? 0 : val;
      },
      handleBiaogeFontSizeChange(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var style= this.currentmodule.config.widgets.xStyle;
        style.fontSize = (val >= 10000 || val <=0)  ? 16 : val;
      },
      handleBiaogeFontSizeInput(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var style= this.currentmodule.config.widgets.xStyle;
        style.fontSize = (val >= 10000 || val <=0)  ? 16 : val;
      },
      // 进度环图文字字体大小设置
      handleJiduhuantuTextFontSizeChange(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var style= this.currentmodule.config.params.style;
        style.active.fontSize = (val >= 10000|| val <=0)  ? 16 : val;
        this.reJichuzhuzhuangtuChart();
      },
      // 进度环图字体大小设置
      handleJiduhuantuFontSizeChange(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var style= this.currentmodule.config.params.style;
        style.label.fontSize = (val >= 10000|| val <=0)  ? 16 : val;
        this.reJichuzhuzhuangtuChart();
      },
      handleShuzituPaddTopChange(e){
        var val = e.target.value.replace(/[^\d]/g,'');
        var style= this.currentmodule.config.widgets;
        style.padding[0] = (val >= 10000||val<=0)  ? 0 : val;
        style.numBackStyle.padding = style.padding[0]+"px "+style.padding[1]+"px "+style.padding[0]+"px "+style.padding[1]+"px ";
        this.reJichuzhuzhuangtuChart();
      },
      handleShuzituPaddTopInput(e){
        var val = e.target.value.replace(/[^\d]/g,'');
        var style= this.currentmodule.config.widgets;
        style.padding[0] = (val >= 10000||val<=0)  ? 0 : val;
        style.numBackStyle.padding = style.padding[0]+"px "+style.padding[1]+"px "+style.padding[0]+"px "+style.padding[1]+"px ";
      },
      handleShuzituPaddLeftChange(e){
        var val = e.target.value.replace(/[^\d]/g,'');
        var style= this.currentmodule.config.widgets;
        style.padding[1] = (val >= 10000||val<=0)  ? 0 : val;
        style.numBackStyle.padding = style.padding[0]+"px "+style.padding[1]+"px "+style.padding[0]+"px "+style.padding[1]+"px ";
        this.reJichuzhuzhuangtuChart();
      },
      handleShuzituPaddLeftInput(e){
        var val = e.target.value.replace(/[^\d]/g,'');
        var style= this.currentmodule.config.widgets;
        style.padding[1] = (val >= 10000||val<=0)  ? 0 : val;
        style.numBackStyle.padding = style.padding[0]+"px "+style.padding[1]+"px "+style.padding[0]+"px "+style.padding[1]+"px ";
      },
      handleDanhangwenbenFontSizeChange(e){
        var val = e.target.value.replace(/[^\d]/g,'');
        var style= this.currentmodule.config.widgets;
        style.fontSize = (val >= 10000||val<=0)  ? 16 : val;
        style.style['font-size'] = val+"px";
        this.reJichuzhuzhuangtuChart();
      },
      handleDanhangwenbenFontSizeInput(e){
        var val = e.target.value.replace(/[^\d]/g,'');
        var style= this.currentmodule.config.widgets;
        style.fontSize = (val >= 10000||val<=0)  ? 16 : val;
      },
      // 进度环图边线宽度设置
      handleJinduhuantuBorderWidthChange(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var style= this.currentmodule.config.params.style;
        style.itemStyle.borderWidth = (val >= 10000||val <= 0)  ? 0 : val;
        this.reJichuzhuzhuangtuChart();
      },
      // 条形图拐点大小修改
      handleTiaoxingtuBorseSizeInput(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currenty = this.currentmodule.config.params.moduledatas.style.y[index];
        currenty.symbolSize = (val >= 10000||val <= 0)  ? 0 : val;
      },
      // 条形图拐点大小修改
      handleTiaoxingtuBorseSizeChange(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currenty = this.currentmodule.config.params.moduledatas.style.y[index];
        currenty.symbolSize = (val >= 10000||val < 0)  ? 0 : val;
        this.reJichuzhuzhuangtuChart();
      },
      handleTiaoxingtuBorderWidthChange(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currenty = this.currentmodule.config.params.moduledatas.style.y[index];
        currenty.lineStyle.width = (val >= 10000)  ? 0 : val;
        this.reJichuzhuzhuangtuChart();
      },
      handleTiaoxingtuBorderWidthInput(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currenty = this.currentmodule.config.params.moduledatas.style.y[index];
        currenty.lineStyle.width = (val >= 10000)  ? 0 : val;
        this.reJichuzhuzhuangtuChart();
      },
       // 柱状图柱子边宽度修改
      handleBorderWidthChange(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currenty = this.currentmodule.config.params.moduledatas.style.y[index];
        currenty.borderWidth = (val >= 10000)  ? 0 : val;
        this.reJichuzhuzhuangtuChart();
      },
      // y轴宽度修改
      handleyAxiaWidthChange(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currentyAxis = this.currentmodule.config.params.yAxis;
        currentyAxis.axisLine.lineStyle.width = (val >= 10000||val < 0)? 1:val;
        this.reJichuzhuzhuangtuChart();
      },
       // 进度环图边线宽度设置输入
      handleJiduhuantuTextLineHeightInput(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var style= this.currentmodule.config.params.style;
        style.active.lineHeight = (val >= 10000||val<=0)  ? 0 : val;
      },
        // 进度环图数字大小设置输入
      handleJiduhuantuTextFontSizeInput(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var style= this.currentmodule.config.params.style;
        style.active.fontSize = (val >= 10000|| val <=0)  ? 16 : val;
      },
        // 进度环图边线宽度设置输入
      handleJiduhuantuFontSizeInput(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var style= this.currentmodule.config.params.style;
        style.label.fontSize = (val >= 10000|| val <=0)  ? 16 : val;
      },
       // 进度环图边线宽度设置输入
      handleJinduhuantuBorderWidthInput(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var style= this.currentmodule.config.params.style;
        style.itemStyle.borderWidth = (val >= 10000||val <= 0)  ? 0 : val;
      },
       // y轴宽度输入防止输入非数字
      handleyAxiaWidthInput(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currentyAxis = this.currentmodule.config.params.yAxis;
        currentyAxis.axisLine.lineStyle.width = (val >= 10000||val < 0)? 1:val;
      },
       // y轴数字大小修改
      handleyAxisFontSizeChange(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currentyAxis = this.currentmodule.config.params.yAxis;
        currentyAxis.axisLabel.fontSize = (val >= 10000||val <= 0)? 16:val;
        this.reJichuzhuzhuangtuChart();
      },
      // x轴数字大小修改
      handlexAxisFontSizeChange(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currentxAxis = this.currentmodule.config.params.xAxis;
        currentxAxis.axisLabel.fontSize = (val >= 10000||val <= 0)? 16:val;
        this.reJichuzhuzhuangtuChart();
      },
      // x轴宽大小修改
      handlexAxiaWidthChange(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currentxAxis = this.currentmodule.config.params.xAxis;
        currentxAxis.axisLine.lineStyle.width = (val >= 10000||val < 0)? 1:val;
        this.reJichuzhuzhuangtuChart();
      },
       // y轴字体大小输入防止输入非数字
      handleyAxisFontSizeInput(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currentyAxis = this.currentmodule.config.params.yAxis;
         currentyAxis.axisLabel.fontSize = (val >= 10000||val <= 0)? 16:val;
      },
       // x轴字体大小输入防止输入非数字
      handlexAxisFontSizeInput(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currentxAxis = this.currentmodule.config.params.xAxis;
         currentxAxis.axisLabel.fontSize = (val >= 10000||val <= 0)? 16:val;
      },
      // x轴线宽度输入,防止输入非数字
      handlexAxiaWidthInput(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currentxAxis = this.currentmodule.config.params.xAxis;
        currentxAxis.axisLine.lineStyle.width = (val >= 10000||val < 0)? 1:val;
      },
      // 柱子宽度输入变化，防止输入非数字
      handleBarWidthInput(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currenty = this.currentmodule.config.params.moduledatas.style.y[index];
        currenty.barWidth = (val >= 10000||val <= 0)? 50:val;
      },
      // 柱子边宽输入变化，防止输入非数字
      handleBorderWidthInput(e,index){
        var val = e.target.value.replace(/[^\d]/g,'');
        var currenty = this.currentmodule.config.params.moduledatas.style.y[index];
        currenty.borderWidth = (val >= 10000||val < 0)? 0:val;
      },
      colorPickShow(e,index,indexColor,j,color){
        if (color) {
          this.colors = color;
        }
        //保存当前点击的哪个组件
        this.currentmodule.datatypeset.index = index;
        this.currentmodule.datatypeset.indexcolor = indexColor;
        this.currentmodule.datatypeset.num = j;

        this.hiddenColorPicker();
        let currentClientX = e.clientX;
        let currentClientY = e.clientY;
        // 地图组件边界色
        // 玫瑰图填充色0 
        if (j==30) {
            this.currentmodule.config.params.color[index][indexColor][0].display="";
            this.currentmodule.config.params.color[index][indexColor][0].left=(currentClientX-280)+"px";
            this.currentmodule.config.params.color[index][indexColor][0].top="200px";
            return;
        }
        // 玫瑰图填充色1
        if (j==31) {
            this.currentmodule.config.params.color[index][indexColor][1].display="";
            this.currentmodule.config.params.color[index][indexColor][1].left=(currentClientX-280)+"px";
            this.currentmodule.config.params.color[index][indexColor][1].top="200px";
            return;
        }
        // 玫瑰图边框色
        if (j==32) {
            this.currentmodule.config.params.color[index][indexColor][2].display="";
            this.currentmodule.config.params.color[index][indexColor][2].left=(currentClientX-280)+"px";
            this.currentmodule.config.params.color[index][indexColor][2].top="200px";
            return;
        }
        // 地图组件边界色
        if (j==29) {
            this.currentmodule.config.params.style.color[5].display="";
            this.currentmodule.config.params.style.color[5].left=(currentClientX-280)+"px";
            this.currentmodule.config.params.style.color[5].top="200px";
            return;
        }
        // 地图组件边界色
        if (j==28) {
            this.currentmodule.config.params.style.color[4].display="";
            this.currentmodule.config.params.style.color[4].left=(currentClientX-280)+"px";
            this.currentmodule.config.params.style.color[4].top="200px";
            return;
        }
        // 地图组件边界色
        if (j==27) {
            this.currentmodule.config.params.style.color[3].display="";
            this.currentmodule.config.params.style.color[3].left=(currentClientX-280)+"px";
            this.currentmodule.config.params.style.color[3].top="200px";
            return;
        }
        // 地图组件边界色
        if (j==26) {
            this.currentmodule.config.params.style.color[2].display="";
            this.currentmodule.config.params.style.color[2].left=(currentClientX-280)+"px";
            this.currentmodule.config.params.style.color[2].top="200px";
            return;
        }
        // 地图组件边界色
        if (j==25) {
            this.currentmodule.config.params.style.color[1].display="";
            this.currentmodule.config.params.style.color[1].left=(currentClientX-280)+"px";
            this.currentmodule.config.params.style.color[1].top="200px";
            return;
        }
        // 地图组件背景色
        if (j==24) {
            this.currentmodule.config.params.style.color[0].display="";
            this.currentmodule.config.params.style.color[0].left=(currentClientX-280)+"px";
            this.currentmodule.config.params.style.color[0].top="200px";
            return;
        }

        // 单行文本和数字图字体颜色
        if (j==23) {
            this.currentmodule.config.widgets.xStyle.colorStyle[0].display="";
            this.currentmodule.config.widgets.xStyle.colorStyle[0].left=(currentClientX-280)+"px";
            this.currentmodule.config.widgets.xStyle.colorStyle[0].top="200px";
            return;
        }
        // 单行文本和数字图字体颜色
        if (j==21) {
            this.currentmodule.config.widgets.style.colorStyle[0].display="";
            this.currentmodule.config.widgets.style.colorStyle[0].left=(currentClientX-280)+"px";
            this.currentmodule.config.widgets.style.colorStyle[0].top="200px";
            return;
        }
        // 数字图块背景色
        if (j==22) {
            this.currentmodule.config.widgets.style.colorStyle[1].display="";
            this.currentmodule.config.widgets.style.colorStyle[1].left=(currentClientX-280)+"px";
            this.currentmodule.config.widgets.style.colorStyle[1].top="200px";
            return;
        }
        // 玫瑰图填充色0 
        if (j==18) {
            this.currentmodule.config.params.color[indexColor][0].display="";
            this.currentmodule.config.params.color[indexColor][0].left=(currentClientX-280)+"px";
            this.currentmodule.config.params.color[indexColor][0].top="200px";
            return;
        }
        // 玫瑰图填充色1
        if (j==19) {
            this.currentmodule.config.params.color[indexColor][1].display="";
            this.currentmodule.config.params.color[indexColor][1].left=(currentClientX-280)+"px";
            this.currentmodule.config.params.color[indexColor][1].top="200px";
            return;
        }
        // 玫瑰图边框色
        if (j==20) {
            this.currentmodule.config.params.color[indexColor][2].display="";
            this.currentmodule.config.params.color[indexColor][2].left=(currentClientX-280)+"px";
            this.currentmodule.config.params.color[indexColor][2].top="200px";
            return;
        }
        // 进度环图颜色设置
        if (j==13) {
            this.currentmodule.config.params.style.color[0].display="";
            this.currentmodule.config.params.style.color[0].left=(currentClientX-280)+"px";
            this.currentmodule.config.params.style.color[0].top="200px";
            return;
        }
        // 进度环图颜色设置
        if (j==14) {
            this.currentmodule.config.params.style.color[1].display="";
            this.currentmodule.config.params.style.color[1].left=(currentClientX-280)+"px";
            this.currentmodule.config.params.style.color[1].top="200px";
            return;
        }
        // 进度环图颜色设置
        if (j==15) {
            this.currentmodule.config.params.style.color[2].display="";
            this.currentmodule.config.params.style.color[2].left=(currentClientX-280)+"px";
            this.currentmodule.config.params.style.color[2].top="200px";
            return;
        }
        // 进度环图颜色设置
        if (j==16) {
            this.currentmodule.config.params.style.color[3].display="";
            this.currentmodule.config.params.style.color[3].left=(currentClientX-280)+"px";
            this.currentmodule.config.params.style.color[3].top="200px";
            return;
        }
        // 进度环图颜色设置
        if (j==17) {
            this.currentmodule.config.params.style.color[4].display="";
            this.currentmodule.config.params.style.color[4].left=(currentClientX-280)+"px";
            this.currentmodule.config.params.style.color[4].top="200px";
            return;
        }
        // 条形图填充色0
        if (j==8) {
           var currenty = this.currentmodule.config.params.moduledatas.style.y;
          currenty[index].style.color[0].display="";
          currenty[index].style.color[0].left=(currentClientX-280)+"px";
          currenty[index].style.color[0].top="200px";
          return;
        }
        // 条形图填充色1
        if (j==9) {
           var currenty = this.currentmodule.config.params.moduledatas.style.y;
          currenty[index].style.color[1].display="";
          currenty[index].style.color[1].left=(currentClientX-280)+"px";
          currenty[index].style.color[1].top="200px";
          return;
        }
        // 条形图边线的颜色
        if (j==10) {
           var currenty = this.currentmodule.config.params.moduledatas.style.y;
          currenty[index].style.color[2].display="";
          currenty[index].style.color[2].left=(currentClientX-280)+"px";
          currenty[index].style.color[2].top="200px";
          return;
        }
        // 条形图拐点的颜色
        if (j==11) {
           var currenty = this.currentmodule.config.params.moduledatas.style.y;
          currenty[index].style.color[3].display="";
          currenty[index].style.color[3].left=(currentClientX-280)+"px";
          currenty[index].style.color[3].top="200px";
          return;
        }
        // 条形图拐点的颜色
        if (j==12) {
          var currentyAxios = this.currentmodule.config.params.yAxis;
          currentyAxios.spliteStyle.display="";
          currentyAxios.spliteStyle.left=(currentClientX-280)+"px";
          currentyAxios.spliteStyle.top="200px";
          return;
        }
        // x轴轴线颜色
        if (j==4) {
          var currentxAxios = this.currentmodule.config.params.xAxis;
          currentxAxios.lineStyle.display="";
          currentxAxios.lineStyle.left=(currentClientX-280)+"px";
          currentxAxios.lineStyle.top="200px";
          return;
        }
        // x轴字体颜色
        if (j==5) {
          var currentxAxios = this.currentmodule.config.params.xAxis;
          currentxAxios.labelStyle.display="";
          currentxAxios.labelStyle.left=(currentClientX-280)+"px";
          currentxAxios.labelStyle.top="200px";
          return;
        }
        // y轴轴线颜色
        if (j==6) {
          var currentyAxios = this.currentmodule.config.params.yAxis;
          currentyAxios.lineStyle.display="";
          currentyAxios.lineStyle.left=(currentClientX-280)+"px";
          currentyAxios.lineStyle.top="200px";
          return;
        }
        // y轴字体颜色
        if (j==7) {
          var currentyAxios = this.currentmodule.config.params.yAxis;
          currentyAxios.labelStyle.display="";
          currentyAxios.labelStyle.left=(currentClientX-280)+"px";
          currentyAxios.labelStyle.top="200px";
          return;
        }
        // 边框色
        if (j==3) {
           var currenty = this.currentmodule.config.params.moduledatas.style.y;
          currenty[index].label.style.display="";
          currenty[index].label.style.left=(currentClientX-280)+"px";
          currenty[index].label.style.top="200px";
          return;
        }
        // 顶部字色
        if (j==2) {
           var currenty = this.currentmodule.config.params.moduledatas.style.y;
          currenty[index].borderStyle.display="";
          currenty[index].borderStyle.left=(currentClientX-280)+"px";
          currenty[index].borderStyle.top="200px";
          return;
        }
        // 柱状图底色1和0
        var currenty = this.currentmodule.config.params.moduledatas.style.y;
        currenty[index].style.color[indexColor][j].display="";
        currenty[index].style.color[indexColor][j].left=(currentClientX-280)+"px";
        currenty[index].style.color[indexColor][j].top="200px";
      },
      // 显示之前先将所有的色彩选择块隐藏
      hiddenColorPicker(){
        if (this.currentmodule.type=="jichuzhuzhuangtu"||this.currentmodule.type=="caisezhuzhuangtu"||this.currentmodule.type=="duidiezhuzhuangtu"||this.currentmodule.type=="jiaocuozhengfuzhoubiaoqiantu"||this.currentmodule.type=="tiaoxingtu") {
          var currenty = this.currentmodule.config.params.moduledatas.style.y||[];
          for (var i = 0; i < currenty.length; i++) {
            if (this.currentmodule.type=="jichuzhuzhuangtu"||this.currentmodule.type=="caisezhuzhuangtu"||this.currentmodule.type=="duidiezhuzhuangtu"||this.currentmodule.type=="jiaocuozhengfuzhoubiaoqiantu") {
              for (var k = 0; k < currenty[i].style.color.length; k++) {
                currenty[i].style.color[k][0].display="none";
                currenty[i].style.color[k][1].display="none";
              }
              currenty[i].label.style.display="none";
              currenty[i].borderStyle.display="none";
            }else if (this.currentmodule.type=="tiaoxingtu"){
              currenty[i].style.color[0].display="none";
              currenty[i].style.color[1].display="none";
              currenty[i].style.color[2].display="none";
              currenty[i].style.color[3].display="none";
            }
          }
        }
        if (this.currentmodule.type=="meiguitu") {
          var colorStyle = this.currentmodule.config.params.color;
          for (let i = 0; i < colorStyle.length; i++) {
            colorStyle[i][0].display="none";
            colorStyle[i][1].display="none";
            colorStyle[i][2].display="none";
          }
        }
        if (this.currentmodule.type=="qiantaobingtu") {
          var colorStyle = this.currentmodule.config.params.color;
          for (let i = 0; i < colorStyle.length; i++) {
            for (var j = 0; j < colorStyle[i].length; j++) {
               colorStyle[i][j][0].display="none";
               colorStyle[i][j][1].display="none";
               colorStyle[i][j][2].display="none";
            }
          }
        }
        if (this.currentmodule.type=="jinduhuantu"){
          var color = this.currentmodule.config.params.style.color;
          color[0].display="none";
          color[1].display="none";
          color[2].display="none";
          color[3].display="none";
          color[4].display="none";
        }
        if (this.currentmodule.type=="danhangwenben"){
          var style = this.currentmodule.config.widgets.style;
          style.colorStyle[0].display="none";
        }
        if (this.currentmodule.type=="shuzitu"){
          var style = this.currentmodule.config.widgets.style;
          style.colorStyle[0].display="none";
          style.colorStyle[1].display="none";
        }

        if (this.currentmodule.type=="biaoge"){
          var style = this.currentmodule.config.widgets.xStyle;
          style.colorStyle[0].display="none";
        }

        if (this.currentmodule.type=="ditu"){
          var style = this.currentmodule.config.params.style;
          style.color[0].display="none";
          style.color[1].display="none";
          style.color[2].display="none";
          style.color[3].display="none";
          style.color[4].display="none";
          style.color[5].display="none";
        }

        if (this.currentmodule.config.params&&this.currentmodule.config.params.xAxis) {
           var currentxAxis = this.currentmodule.config.params.xAxis;
           currentxAxis.labelStyle.display="none";
           currentxAxis.lineStyle.display="none";
        }
        if (this.currentmodule.config.params&&this.currentmodule.config.params.yAxis) {
           var currentyAxis = this.currentmodule.config.params.yAxis;
           currentyAxis.labelStyle.display="none";
           currentyAxis.lineStyle.display="none";
           currentyAxis.spliteStyle.display="none";
        }    
      },
      // 获取大屏详情
      moduleContent(){
        let params = {
          id:this.modules.moduleid
        }
        if (!this.modules.moduleid) {
          return;
        }
        this.moduleMessage({params}).then(function(res){
            if (res.code=="1") {
                var data = res.data;
                if (!res.data) {
                  return;
                }
                if (res.data.datas) {
                  this.imgmodules = JSON.parse(res.data.datas);
                  this.getModuleData();
                }
                this.modules.defaulestyle.width = data.width;
                this.modules.defaulestyle.height = data.height;
                this.defaultsettings.title = data.title;
                this.modules.imgstyle["background-image"] = "url("+data.coverimg+")";
                this.defaultsettings.src=data.coverimg;
                this.defaultsettings.headimg=data.headimg;
                this.defaultsettings.resizetype = data.resizetype;
                switch(data.resizetype) {
                  case "0":
                    this.defaultsettings.resizetypename="全屏等比缩放(大屏/PC)";
                    break;
                  case "1":
                    this.defaultsettings.resizetypename="按高度适配(横向滚动)";
                    break;
                  case "2":
                    this.defaultsettings.resizetypename="按宽度适配(移动端)";
                    break;
                }
                this.changeWindow();
            }else{
              this.$Message(res.message);
            }
        }.bind(this))
      },
      // 更新大屏信息
      editModules(preview){
        if (!this.modules.moduleid ) {
          return;
        }
        let imgmodule = [];
        // Object.assign(imgmodule,this.imgmodules);
        for (let i = 0; i < this.imgmodules.length; i++) {
          let data = {
            id:this.imgmodules[i].id,
            type : this.imgmodules[i].type,
            selects:false,
            name:this.imgmodules[i].name,
            config:this.imgmodules[i].config,
            style:this.imgmodules[i].style
          } /*data_end*/
          imgmodule.push(data)
        }
        for (var i = 0; i < imgmodule.length; i++) {
          imgmodule[i].style.border="0px dotted rgba(35,195,18,0)";
        }
        var params = {
          id:this.modules.moduleid,
          title:this.defaultsettings.title||"未设置标题",
          width:this.modules.defaulestyle.width,
          height:this.modules.defaulestyle.height,
          resizetype:this.defaultsettings.resizetype,
          coverimg:this.defaultsettings.src,
          headimg:this.defaultsettings.headimg,
          datas:imgmodule.length>0 ? JSON.stringify(imgmodule):""
        }
        this.editModule({params}).then(function(res){
          // console.log(res);
          if (preview) {
            this.$router.push({
              name:"preview",
              query:{
                id:this.modules.moduleid
              }
            })
          }
        }.bind(this))
      },
      titleChange(e){
        this.defaultsettings.title= e.target.value;
        this.editModules();
      },
      preView(openUrl){
        this.editModules(true);
        this.$Spin.show();
        setTimeout(function(){
          this.$Spin.hide();
          this.$router.push({
            name:"preview",
            query:{
              id:this.modules.moduleid
            }
          })
        }.bind(this),500);
      },
      backToList(){
        this.saveImage('view-imgs');
      },
      handleModuleInput(e,type){
        var val = e.target.value.replace(/[^\d]/g,'');
        if (type=="kuan") {
          this.currentmodule.width = val > 9600 ? 9600:val;
        }else if (type=="gao") {
          this.currentmodule.height = val > 9600 ? 9600:val;
        }else if (type=="left") {
          this.currentmodule.left = val > 9600 ? 9600:val;
        }else if (type=="top") {
          this.currentmodule.top = val > 9600 ? 9600:val;
        }else if (type=="index") {
          if (val <= 0) {
             this.currentmodule.zindex=1;return;
          }
          this.currentmodule.zindex = val > 999 ? 999:val;
        }
      },
      autoDataChange(val){
        if (val=="开启") {
          let type = this.currentmodule.type;
          let id = this.currentmodule.id;
          clearInterval(this.currentmodule.config.time);
          this.autoGetData(type,id);
          this.currentmodule.config.time = setInterval(function()
          {
            for (let i = 0; i < this.imgmodules.length; i++) {
              if (this.imgmodules[i].id==id&&this.imgmodules[i].config.autodata=="开启"&&this.imgmodules[i].style.display!="none") {
                this.autoGetData(this.imgmodules[i].type,this.imgmodules[i].id);
              }
            }
          }.bind(this),(this.currentmodule.config.autodatatime||10)*1000);
        }else if(val=="关闭"){
            clearInterval(this.currentmodule.config.time);
        }
      },
      // 获取基础数据并渲染，判断是否定时获取，判断是否api获取等
      getModuleData(){
          for (let i = 0; i < this.imgmodules.length; i++) {
            if(this.imgmodules[i].type=="jichuzhuzhuangtu"||this.imgmodules[i].type=="caisezhuzhuangtu"||this.imgmodules[i].type=="meiguitu"||this.imgmodules[i].type=="tiaoxingtu"||this.imgmodules[i].type=="jinduhuantu"||this.imgmodules[i].type=="danhangwenben"||this.imgmodules[i].type=="shuzitu"||this.imgmodules[i].type=="biaoge"||this.imgmodules[i].type=="ditu"){
              this.autoGetData(this.imgmodules[i].type,this.imgmodules[i].id);
              if(this.imgmodules[i].config.datastype=="api"&&this.imgmodules[i].config.autodata=="开启"){
                let type = this.imgmodules[i].type;
                let id = this.imgmodules[i].id;
                let time = setInterval(function(){
                    if (this.imgmodules[i].config.datastype=="api"&&this.imgmodules[i].config.autodata=="开启"&&this.imgmodules[i].style.display!="none") {
                      this.autoGetData(type,id);
                    }
                }.bind(this),(this.imgmodules[i].config.autodatatime||10)*1000);
                this.imgmodules[i].config.time = time;
              }
            }else if(this.imgmodules[i].type=="ditu"){
              this.reDitu(i,this.imgmodules[i].id)
            }
          // 最后将会去掉这段文本
           // this.$nextTick(() => {
           //    if (this.imgmodules[i].config.datas&&this.imgmodules[i].config.chart) {
           //      if (this.imgmodules[i].chart) {
           //        this.imgmodules[i].chart.setOption(this.imgmodules[i].config.widgets,true);
           //        this.imgmodules[i].chart.resize();
           //      }else{
           //        var myChart = echarts.init(document.getElementById(this.imgmodules[i].id));
           //        this.imgmodules[i].chart = myChart;
           //        this.imgmodules[i].chart.setOption(this.imgmodules[i].config.widgets,true);
           //        this.imgmodules[i].chart.resize();
           //      } 
           //    }   
           //  })
          } //for_end
      },
      autoGetData(type,id){
        // 非当前页面
        if (this.$route.path!="/imgeditor") {
          return;
        }
        if (type=="jichuzhuzhuangtu") {
          this.reJichuzhuzhuangtu("",id);
        }else if (type=="caisezhuzhuangtu"){
          this.reCaisezhuzhuangtu("",id);
        }else if (type=="duidiezhuzhuangtu"){
          this.reDuidiezhuzhuangtu("",id);
        }else if (type=="Jiaocuozhengfuzhoubiaoqiantu"){
          this.reJiaocuozhengfuzhoubiaoqiantu("",id);
        }else if (type=="qiantaobingtu"){
          this.reQiantaobingtu("",id);
        }else if (type=="meiguitu") {
          this.reMeiGuitu("",id);
        }else if (type=="tiaoxingtu") {
          this.reTiaoxingtu("",id);
        }else if(type=="jinduhuantu"){
          this.reJinduhuantu("",id)
        }else if(type=="danhangwenben"){
          this.reDanhangwenben("",id)
        }else if(type=="shuzitu"){
          this.reShuzitu("",id)
        }else if(type=="biaoge"){
          this.reBiaoge("",id)
        }else if(type=="ditu"){
          this.reDitu("",id)
        }
      },
      // 自动更新时间变化
      updateTimeChange(e){
        var val = e.target.value.replace(/[^\d]/g,'');
        if (val <= 10) {
          val = 10;
        }
        this.currentmodule.config.autodatatime = val;
      },
      // 组件宽度高度改变
      currentmoduleSizeChange(e,type){
          var val = e.target.value.replace(/[^\d]/g,'');
          for (let i = 0; i < this.imgmodules.length; i++) {
            if (this.imgmodules[i].id==this.currentmodule.id) {
              switch(type) {
                case "kuan":
                  this.imgmodules[i].style.width = val+"px";
                  break;
                case "gao":
                  this.imgmodules[i].style.height = val+"px";
                  break;
                case "left":
                  this.imgmodules[i].style.left = val+"px";
                  break;
                case "top":
                  this.imgmodules[i].style.top = val+"px";
                  break;
                case "name":
                  this.imgmodules[i].name = e.target.value;
                  break;
                case "index":
                  this.imgmodules[i].style['z-index'] = e.target.value;
                  break;
              }
              // 组件重新渲染宽高
              this.$nextTick(() => {
                 this.imgmodules[i].chart.resize();
              })
              this.resizeShow();
            }
          }
      },
      // 置顶组件
      moduleTop(zindex){
        for(let i = 0;i<this.imgmodules.length;i++){
          if (this.imgmodules[i].selects==true) {
            this.imgmodules[i].style["z-index"]=zindex;
          }
        }
        this.defaultsettings.menustyle.display="none";
        this.zooms.show = false;
      },
      moduleDeleteCancel(){
        this.message.style.display="none";
      },
      // 删除组件，并非真正的删除，而是不显示了
      moduleDelete(){
        for(let i = 0;i<this.imgmodules.length;i++){
          if (this.imgmodules[i].selects==true) {
            this.imgmodules[i].style.display="none";
          }
        }
        this.message.style.display="none";
        this.zooms.show = false;
      },
      // 显示删除确认组件
      moduleDeleteShow(){
        this.menuHidden();
        this.hiddenModuleConfig();
        this.message.style.display="";
      },
      // 显示大屏设置
      moduleDefaultShow(){
        this.moduleListHidden();
        if (this.zooms.resize) {
          return;
        }
        this.hiddenModuleConfig();
        this.zooms.resize  = false; //取消缩放模式
        this.defaultsettings.style.display="";
        this.defaultsettings.resizetypestyle.display="none";
      },
      // 大屏宽度高度改变,只允许输入数字
      handleWidthInput(e){
        var valwidth = e.target.value.replace(/[^\d]/g,'');
        if (!valwidth||valwidth<=0) {
          valwidth = 1920;
        }
        this.modules.defaulestyle.width=valwidth > 9600 ? 9600:valwidth;
        this.modules.imgstyle["width"] = this.modules.defaulestyle.width+"px";
        this.editModules();
      },
      handleHeightInput(e){
        var valheight = e.target.value.replace(/[^\d]/g,'');
        if ((!valheight) || (valheight <= 0)) {
          valheight=1080;
        }
        this.modules.defaulestyle.height = valheight > 9600 ? 9600:valheight;
        this.modules.imgstyle["height"] = this.modules.defaulestyle.height+"px";
        this.editModules();
      },
      // 隐藏默认设置
      defaultHidden(){
        this.defaultsettings.resizetypestyle.display="none";
      },
      // 显示菜单
      menuShow(Ce){
        let currentClientX = Ce.clientX;
        let currentClientY = Ce.clientY;
        this.defaultsettings.menustyle.display="";
        this.defaultsettings.menustyle.left=(currentClientX-80)+"px";
        this.defaultsettings.menustyle.top=(currentClientY-48)+"px";
      },
      menuHidden(Ce){
        this.defaultsettings.menustyle.display="none";
      },
      // 隐藏组件设置的下拉框
      selectHidden(e){
        e.preventDefault();
        if (this.currentmodule.config.widgets.style) {
          this.currentmodule.config.widgets.style.fontStyle.display="none";
        }
        if (this.currentmodule.apitype) {
          this.currentmodule.apitype.display="none";
        }
        if (this.defaultsettings.datatypestyle) {
          this.defaultsettings.datatypestyle.style.display="none";
        }
        this.hiddenColorPicker();
      },
      // API选择
      chooseAPIType(type){
        this.currentmodule.apitype.display="none";
        if (type==1) {
          this.currentmodule.config.apitypeselect="GET";
        }else{
          this.currentmodule.config.apitypeselect="POST";
        }
      },
      // API请求类型切换
      showAPItypeChoose(e){
        e.preventDefault();

        if (this.currentmodule.apitype.display=="none") {
          this.currentmodule.apitype.display="";
        }else{
          this.currentmodule.apitype.display="none";
        }
      },
      editorInit: function () {
          require('brace/mode/json');
          require('brace/mode/javascript');
          require('brace/theme/monokai')
      },
      // 静态数据输入框改变
      aceChange (content,$ace,$fn) {
            if (!content) {
              return;
            }
            var contents = JSON.parse(content);
            var widgets;
            if (this.currentmodule.type=="tiaoxingtu") {
              if (!contents.x||!contents.y) {
                return;
              }
              this.currentmodule.config.params.x = contents.x;
              this.currentmodule.config.params.y = contents.y;
              this.currentmodule.config.params.moduledatas.x = contents.x;
              this.currentmodule.config.params.moduledatas.y = contents.y;
              this.currentmodule.config.params.moduledatas.label = contents.label||[];
              widgets = moduledefault.Tiaoxingtu(this.currentmodule.config.params);
            }else if (this.currentmodule.type=="jichuzhuzhuangtu"){
              if (!contents.x||!contents.y) {
                return;
              }
              this.currentmodule.config.params.x = contents.x;
              this.currentmodule.config.params.y = contents.y;
              this.currentmodule.config.params.moduledatas.x = contents.x;
              this.currentmodule.config.params.moduledatas.y = contents.y;
              this.currentmodule.config.params.moduledatas.label = contents.label||[];
              widgets = moduledefault.Jichuzhuzhuangtu(this.currentmodule.config.params);
            }else if (this.currentmodule.type=="caisezhuzhuangtu"){
              if (!contents.x||!contents.y) {
                return;
              }
              this.currentmodule.config.params.x = contents.x;
              this.currentmodule.config.params.y = contents.y;
              this.currentmodule.config.params.moduledatas.x = contents.x;
              this.currentmodule.config.params.moduledatas.y = contents.y;
              this.currentmodule.config.params.moduledatas.label = contents.label||[];
              widgets = moduledefault.Caisezhuzhuangtu(this.currentmodule.config.params);
            }else if (this.currentmodule.type=="duidiezhuzhuangtu"){
              if (!contents.x||!contents.y) {
                return;
              }
              this.currentmodule.config.params.x = contents.x;
              this.currentmodule.config.params.y = contents.y;
              this.currentmodule.config.params.moduledatas.x = contents.x;
              this.currentmodule.config.params.moduledatas.y = contents.y;
              this.currentmodule.config.params.moduledatas.label = contents.label||[];
              widgets = moduledefault.Duidiezhuzhuangtu(this.currentmodule.config.params);
            }else if (this.currentmodule.type=="qiantaobingtu"){
              if (!contents.data) {
                return;
              }
              this.currentmodule.config.params.data = contents.data;
              this.currentmodule.config.params.moduledatas.data = contents.data;
              this.currentmodule.config.params.moduledatas.label = contents.label||[];
              widgets = moduledefault.Qiantaobingtu(this.currentmodule.config.params);
            }else if (this.currentmodule.type=="jiaocuozhengfuzhoubiaoqiantu"){
              if (!contents.x||!contents.y) {
                return;
              }
              this.currentmodule.config.params.x = contents.x;
              this.currentmodule.config.params.y = contents.y;
              this.currentmodule.config.params.moduledatas.x = contents.x;
              this.currentmodule.config.params.moduledatas.y = contents.y;
              this.currentmodule.config.params.moduledatas.label = contents.label||[];
              widgets = moduledefault.Jiaocuozhengfuzhoubiaoqiantu(this.currentmodule.config.params);
            }else if (this.currentmodule.type=="danhangwenben"){
              if (!contents.text) {
                return;
              }
              this.currentmodule.config.widgets.text = contents.text;
            }else if (this.currentmodule.type=="jinduhuantu"){
              if (!contents.value||!contents.name||contents.value>100) {
                return;
              }
              this.currentmodule.config.params.value = contents.value;
              this.currentmodule.config.params.name = contents.name;
              widgets = moduledefault.Jinduhuantu(this.currentmodule.config.params);
            }else if (this.currentmodule.type=="shuzitu"){
              if (!contents.text) {
                return;
              }
              var num =contents.text.replace(/[^\d]/g,'');
              this.currentmodule.config.widgets.text = num;
            }else if(this.currentmodule.type=="meiguitu"){
              if (!contents.x||!contents.y) {
                return;
              }
              this.currentmodule.config.params.label = contents.label||"";
              this.currentmodule.config.params.moduledatas.x = contents.x;
              this.currentmodule.config.params.moduledatas.y = contents.y;
              this.currentmodule.config.params.moduledatas.label = contents.label||[];
              widgets = moduledefault.Meiguitu(this.currentmodule.config.params);
            }else if(this.currentmodule.type=="biaoge"){
              if (!contents.x||!contents.y) {
                return;
              }
              this.currentmodule.config.widgets.x = contents.x;
              this.currentmodule.config.widgets.y = contents.y;
            }else if(this.currentmodule.type=="ditu"){
              this.currentmodule.config.params.data = contents;
              widgets = moduledefault.Ditu(this.currentmodule.config.params);
            }
            for (let i = 0; i < this.imgmodules.length; i++) {
              if (this.imgmodules[i].id==this.currentmodule.id) {
                if (this.imgmodules[i].config.chart) {
                   this.imgmodules[i].chart.setOption(widgets,true);
                   this.imgmodules[i].chart.resize();
                }
              }
            }
      },
      chooseDanhangwenbenDataType(type){
          this.currentmodule.config.widgets.style.fontStyle.display="none";
          if (type=="1") {
            this.currentmodule.config.widgets.style['font-weight'] ='600'; 
          }else{
            this.currentmodule.config.widgets.style['font-weight'] ='400'; 
          }
      },
      chooseDataType(type){
        this.defaultsettings.datatypestyle.style.display="none";
        if (type=="1") {
          if (this.currentmodule.config.widgetdata) {
            var contents = JSON.parse(this.currentmodule.config.widgetdata);
           var widgets;
            if (this.currentmodule.type=="jichuzhuzhuangtu"||this.currentmodule.type=="caisezhuzhuangtu"||this.currentmodule.type=="tiaoxingtu") {
                this.currentmodule.config.params.x = contents.x;
                this.currentmodule.config.params.y = contents.y;
                this.currentmodule.config.params.moduledatas.x = contents.x;
                this.currentmodule.config.params.moduledatas.y = contents.y;
            }else if(this.currentmodule.type=="danhangwenben"){
                this.currentmodule.config.widgets.text = contents.text;
            }else if(this.currentmodule.type=="meiguitu"){
                this.currentmodule.config.params.x = contents.x;
                this.currentmodule.config.params.y = contents.y;
                this.currentmodule.config.params.label = contents.label||"";
                this.currentmodule.config.params.moduledatas.x = contents.x;
                this.currentmodule.config.params.moduledatas.y = contents.y;
            }

            if (this.currentmodule.type=="jichuzhuzhuangtu") {
              widgets = moduledefault.Jichuzhuzhuangtu(this.currentmodule.config.params);
            }else if (this.currentmodule.type=="caisezhuzhuangtu"){
              widgets = moduledefault.Caisezhuzhuangtu(this.currentmodule.config.params);
            }else if (this.currentmodule.type=="tiaoxingtu"){
              widgets = moduledefault.Tiaoxingtu(this.currentmodule.config.params);
            }else if (this.currentmodule.type=="meiguitu"){
              widgets = moduledefault.Meiguitu(this.currentmodule.config.params);
            }else if (this.currentmodule.type=="jinduhuantu"){
              widgets = moduledefault.Jinduhuantu(this.currentmodule.config.params);
            }

            if (this.currentmodule.config.chart) {
                for (let i = 0; i < this.imgmodules.length; i++) {
                    if (this.imgmodules[i].id==this.currentmodule.id) {
                     this.imgmodules[i].chart.setOption(widgets,true);
                     this.imgmodules[i].chart.resize();
                    }
                }
            }
            
          }
          this.currentmodule.config.datastype='default';
          this.defaultsettings.datatypestyle.name="静态数据";
        }else{
          this.currentmodule.config.datastype='api';
          this.defaultsettings.datatypestyle.name="API";
        }
      },
      showDanhangwenbenDatatypeChoose(e){
        e.preventDefault();
        if (this.currentmodule.config.widgets.style.fontStyle.display=="none") {
          this.currentmodule.config.widgets.style.fontStyle.display = "";
        }else{
          this.currentmodule.config.widgets.style.fontStyle.display = "none";
        }
      },
      // 数据类型切换
      showDatatypeChoose(e){
        e.preventDefault();
        if (this.defaultsettings.datatypestyle.style.display=="none") {
          this.defaultsettings.datatypestyle.style.display="";
        }else{
          this.defaultsettings.datatypestyle.style.display="none";
        }
      },
      // 显示组件设置
      showModuleConfig(){
        this.modules.imgstyleright.right = "300px";
        this.defaultsettings.style.display="none";
        this.defaultsettings.viewconfigstyle.display="";
      },
      // 隐藏组件设置
      hiddenModuleConfig(){
        this.modules.imgstyleright.right = "0px";
        this.defaultsettings.viewconfigstyle.display="none";
      },
      // 基础设置展示
      showDefaultSettings(){
        this.hiddenModuleConfig();
        if (this.defaultsettings.style.display=="none") {
          this.defaultsettings.style.display="";
        }else{
          this.defaultsettings.style.display="none";
        }
      },
      // 缩放方式选择展示隐藏
      showResizeType(){
        if (this.defaultsettings.resizetypestyle.display=="none") {
          this.defaultsettings.resizetypestyle.display="";
        }else{
          this.defaultsettings.resizetypestyle.display="none";
        }
      },
      // 缩放方式选择
      chooseResizeType(type){
        this.defaultsettings.resizetypestyle.display="none";
        switch(type) {
          case 0:
            this.defaultsettings.resizetype = "0";
            this.defaultsettings.resizetypename="全屏等比缩放(大屏/PC)";
            break;
          case 1:
            this.defaultsettings.resizetype = "1";
            this.defaultsettings.resizetypename="按高度适配(横向滚动)";
            break;
          case 2:
            this.defaultsettings.resizetype = "2";
            this.defaultsettings.resizetypename="按宽度适配(移动端)";
            break;
        }
        this.editModules();
      },
      // 图片组件的图片选择变化
      imgmoduleSrcChange(e){
        this.defaultsettings.filename = e.target.files[0].name;
        var files = e.target.files;
        if(window.FileReader) {  
            var fr = new FileReader();  
            fr.onloadend = function(ef) { 
              // this.currentmodule.config.imgsrc已经绑定到当前组件的src上，所以同时改变
              
              this.currentmodule.config.imgsrc = ef.target.result;
            }.bind(this);  
            fr.readAsDataURL( e.target.files[0]);  
        }
        var formData = new window.FormData();
        formData.append('file',e.target.files[0]);
        this.fileUpload(formData).then(function(res){
          if(res.code=="1"){
            for (let i = 0; i < this.imgmodules.length; i++) {
              if (this.currentmodule.id == this.imgmodules[i].id) {
                this.imgmodules[i].imgsrc = res.data.url
              }
            }
            this.currentmodule.config.imgsrc = res.data.url;
            this.editModules();
          }else{
            this.$Message.info(res.message);
          }
        }.bind(this))
      },
      // 图片变化
      backGroundChange(e){
        this.defaultsettings.filename = e.target.files[0].name;
        var files = e.target.files;
        if(window.FileReader) {  
            var fr = new FileReader();  
            fr.onloadend = function(ef) { 
              this.defaultsettings.src = ef.target.result;
              this.modules.imgstyle["background-image"]="url("+ef.target.result+")";
              this.defaultsettings.choosestyle.display="none";
              this.defaultsettings.clearnstyle.display="";
            }.bind(this);  
            fr.readAsDataURL( e.target.files[0]);  
        }
        var formData = new window.FormData();
        formData.append('file',e.target.files[0]);
        this.fileUpload(formData).then(function(res){
          if(res.code=="1"){
            this.defaultsettings.src =res.data.url ;
            this.editModules();
          }else{
            this.$Message.info(res.message);
          }
        }.bind(this))
      },
      // 清除背景图片
      clearnBackGround(){
          this.$refs.referenceUpload.value = null;
          this.modules.imgstyle["background-image"]="";
          this.defaultsettings.src="";
          this.defaultsettings.choosestyle.display="";
          this.defaultsettings.clearnstyle.display="none";
      },
      // 滑块变动
      sliderChange(val){
        if (val==0) {
          return;
        }
        this.modules.radio = val/100;
        this.changeWindow(this.modules.radio);
      },
      radioFormat(val){
          return '缩放: ' + val + '%';
      },
      changeWindow(val){
        let imgModulesHight = document.body.clientHeight-110;
        let scaleRadio = (imgModulesHight/this.modules.defaulestyle.height).toFixed(2);
        this.modules.radiodata=scaleRadio*100;
        if (!val) {
          this.modules.radio = scaleRadio;
        }else{
          this.modules.radio = val;
        }
        this.modules.imgstyle["width"]=this.modules.defaulestyle.width+"px";
        this.modules.imgstyle["height"]=this.modules.defaulestyle.height+"px";
        this.modules.imgstyle["transform"]="scale("+ this.modules.radio+")";
      },
      // 显示拖拽组件
      showModules(id){
        for (let i = 0; i < this.modulessource.length; i++) {
          if (this.modulessource[i].id==id) {
            this.modules.modulesource = this.modulessource[i].modules;
          }
        }
        this.modules.style.display="";
      },
      imgDraggable (type){
        this.imgtype = type;
      },
      imgDragenterEnter(e){
        e.preventDefault();
      },
      imgDragenterOver(e){
        e.preventDefault();
      },
      moduleListHidden(){
        this.modules.style.display="none"
      },
      zoomsHidden(e){
        this.moduleListHidden();
        this.menuHidden();
        e.preventDefault();
        // 当点击拖拽区时不用隐藏
        if (e.target.className=="item-border") {
          return; 
        }
        if (this.zooms.resize) {
          return;
        }
        // 隐藏组件设置
        this.hiddenModuleConfig();
        // 显示大屏设置
        this.defaultsettings.style.display="";
        this.defaultsettings.resizetypestyle.display="none";
        this.zooms.resize  = false; //取消缩放模式
        this.zooms.show = false;
        // 设置所有组减为不选中
        for (let i = 0; i < this.imgmodules.length; i++) {
          this.imgmodules[i].selects = false;
          this.imgmodules[i].style.border='1px dotted rgba(35,195,18,0)';
        }
      },
      // ctr按键按下可以多选
      ctrEnterDowm(e){
        this.zooms.ctrenter = true;
      },
      // ctr按键放开取消多选
      ctrEnterUp(e){
        this.zooms.ctrenter = false;
      },
      /*
        选中组件和移动组件时候更新拖拽组件的位置以及宽度和高度
       */
      resizeShow(){
        this.zooms.show = true;
        let moveLeft = 100000000; //拖拽遮盖组件距离左侧的浮动距离默认0;
        let moveWidth = 0; //拖拽遮盖组件的宽度，宽度等于选中元素组件里右边距离左侧边界最远的一个
        let moveTop = 100000000;//拖拽遮盖组件距离顶部的浮动距离默认0;
        let moveHeight = 0;//拖拽遮盖组件高度，等于选中元素组件里右边距离顶部边界最远的一个
        // 根据选中组件的宽度高度以及左侧和顶部的距离计算新的遮罩脱妆位置
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].selects == true) {
            // 重新计算遮罩层的宽度和高度 
            let itemLeft = parseFloat(this.imgmodules[i].style.left.replace('px',''));
            let itemTop = parseFloat(this.imgmodules[i].style.top.replace('px',''));
            let itemWidth = parseFloat(this.imgmodules[i].style.width.replace('px',''));
            let itemHeight = parseFloat(this.imgmodules[i].style.height.replace('px',''));
            if ( itemLeft < moveLeft) {
              moveLeft = itemLeft;
            }
            if (itemTop < moveTop) {
              moveTop = itemTop;
            }
            if ((Math.abs(itemLeft)+itemWidth) > moveWidth) {
              moveWidth = itemLeft+itemWidth;
            }
            if ((Math.abs(itemTop)+itemHeight) > moveHeight) {
              moveHeight = itemTop+itemHeight;
            }
            this.zooms.style.width = parseFloat((moveWidth-moveLeft))+'px';
            this.zooms.style.height = parseFloat((moveHeight-moveTop))+'px';
            this.zooms.style.top = moveTop+'px';
            this.zooms.style.left = moveLeft+'px';
          }
        }/*for_end*/
      },
      // 缩放时候只是重新计算宽度
      resizeWidth(){
        this.zooms.show = true;
        this.zooms.style.width = Ce.target.width+"px";
      },
      // 缩放时候只是重新计算高度
      resizeHeight(){
        this.zooms.show = true;
        this.zooms.style.height = Ce.target.height+"px";
      },
      // 缩放时候重新计算高度和宽度
      resizeRightBottom(left,top){
        this.zooms.show = true;
        // X轴,Y轴缩小的比例 
        let widthRadio = (left/parseFloat(this.zooms.style.width.replace('px','')));
        let heightRadio = (top/parseFloat(this.zooms.style.height.replace('px','')));
        // 先变更遮罩层的宽高
        this.zooms.style.width = (parseFloat(this.zooms.style.width.replace('px',''))+left)+"px";
        this.zooms.style.height = (parseFloat(this.zooms.style.height.replace('px',''))+top)+"px";
        //拖动和缩放已经选中的组件
        this.reSizeHeightAndWidthModules(widthRadio,heightRadio);
      },
      resizeBottomMouseMove(e){
        e.preventDefault();
      },
      resizeMouseMove(e){
        e.preventDefault();
      },
      resizeRightMouseMove(e){
        e.preventDefault();
      },
      boardMouseMove(e){
        e.preventDefault();
      },
      /*
          缩放鼠标按下,右下角rightbottom缩放按钮
       */
      resizeMouseDown(e,type){
        e.preventDefault();
        let currentClientX = e.clientX;
        let currentClientY = e.clientY;
        this.zooms.type = type;
        document.onmousemove = (e)=>{
          this.modules.gridstype.display="";
            let left = (e.clientX - currentClientX)/this.modules.radio;  //左右移动的距离   
            let top = (e.clientY - currentClientY)/this.modules.radio; //上下移动的距离      
            currentClientX = e.clientX;
            currentClientY = e.clientY; //重新保存鼠标状态防止再次触发移动事件 
            // 重新计算宽度高度以及左侧和顶部距离
            // console.log(type);
            if(this.zooms.type=="rightbottom"){
              this.resizeRightBottom(left,top);
            }else if(this.zooms.type=="right"){
              this.resizeRight(left,top);
            }else if(this.zooms.type=="bottom"){
              this.resizeBottom(left,top);
            }else if(this.zooms.type=="leftbottom"){
              this.resizeLeftBottom(left,top);
            }else if(this.zooms.type=="left"){
              this.resizeLeft(left,top);
            }else if(this.zooms.type=="lefttop"){
              this.resizeLeftTop(left,top);
            }else if(this.zooms.type=="top"){
              this.resizeTop(left,top);
            }else if(this.zooms.type=="righttop"){
              this.resizeRightTop(left,top);
            }
        }
        document.onmouseup = (e)=>{
            this.modules.gridstype.display="none";
            this.zooms.resize  = true; //设置模式为缩放模式
            // 事件執行順序 mousedown >> mouseup >> click，因為mouseup與click事件會衝突，所以先執行up，
            // 但是不想讓click事件执行，因此300毫秒以后再把click事件放开，这样300毫秒内click事件已经判断完毕resize了
            setTimeout(function(){
              this.zooms.resize  = false;
            }.bind(this),300);
            this.currentModuleMoveResize();
            document.onmousemove = null;
            document.onmouseup = null;
        }
      },
      /*
        遮罩层按下是拖动
       */
      boardMouseDown(Ce){
        Ce.preventDefault();
        this.showModuleConfig();
         //保存鼠标当前位置 
        let currentClientX = Ce.clientX;
        let currentClientY = Ce.clientY;
        document.onmousemove = (Ce)=>{  
           // 栅格显示
            this.modules.gridstype.display="";
            //鼠标按下并移动的事件
            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            let left = (Ce.clientX - currentClientX)/this.modules.radio;  //左右移动的距离   
            let top = (Ce.clientY - currentClientY)/this.modules.radio; //上下移动的距离
            currentClientX = Ce.clientX;
            currentClientY = Ce.clientY; //重新保存鼠标状态防止再次触发移动事件
            this.moveModules(Ce,left,top);
        };
        document.onmouseup = (Ce) => {
          this.zooms.resize  = true; //设置模式为缩放模式
          // 但是不想讓click事件执行，因此300毫秒以后再把click事件放开，这样300毫秒内click事件已经判断完毕resize了
          setTimeout(function(){
            this.zooms.resize  = false;
          }.bind(this),300);

          if (Ce.button==2) {
            this.menuShow(Ce);
          }else{
            this.menuHidden();
          }
          // 栅格消失
          this.modules.gridstype.display="none";
            document.onmousemove = null;
            document.onmouseup = null;
        };
      },
      //拖动已经选中的组件,重新更新所有已选中的组件的位置
      moveModules(Ce,left,top){
        // 先更新每个组件的位置
          for (let j = 0; j < this.imgmodules.length; j++) {
              if ( this.imgmodules[j].selects) {
                let disX = parseFloat(this.imgmodules[j].style.left.replace("px",""));
                let disY = parseFloat(this.imgmodules[j].style.top.replace("px",""));
                this.imgmodules[j].style.left = (left + disX) + 'px';
                this.imgmodules[j].style.top = (top + disY) + 'px';
              }
          }
          // 然后再更新拖拽组件的位置
          this.resizeShow();
          this.currentModuleMoveResize();
      },
      // 向右拉动时候只计算宽度
      resizeRight(left,top){
        this.zooms.show = true;
        // X轴,Y轴缩小的比例 
        let widthRadio = (left/parseFloat(this.zooms.style.width.replace('px','')));
        // 先变更遮罩层的宽高
        this.zooms.style.width = (parseFloat(this.zooms.style.width.replace('px',''))+left)+"px";
        //拖动和缩放已经选中的组件
        this.reSizeWidthModules(widthRadio);
      },
      // 向下拉动时候只计算宽度
      resizeBottom(left,top){
        this.zooms.show = true;
        // X轴,Y轴缩小的比例 
        let heightRadio = (top/parseFloat(this.zooms.style.height.replace('px','')));
        // 先变更遮罩层的宽高
        this.zooms.style.height = (parseFloat(this.zooms.style.height.replace('px',''))+top)+"px";
        //拖动和缩放已经选中的组件
        this.reSizeHeightModules(heightRadio);
      },
      /*
        向左拉动只需要计算宽度和左侧距离
       */
      resizeLeft(left,top){
        this.zooms.show = true;
        // X轴,Y轴缩小的比例 
        let widthRadio = (left/parseFloat(this.zooms.style.width.replace('px','')));
        let oldZoomLeft = parseFloat(this.zooms.style.left.replace('px',''));
        let newZoomLeft = oldZoomLeft+left;
        // 先变更遮罩层的宽高
        this.zooms.style.width = (parseFloat(this.zooms.style.width.replace('px',''))-left)+"px";
        this.zooms.style.left = newZoomLeft + "px";
        //拖动和缩放已经选中的组件
        this.reSizeLeftModules(widthRadio,oldZoomLeft,newZoomLeft);
      },
      reSizeLeftModules(widthRadio,oldZoomLeft,newZoomLeft){
        let styleLeft = parseFloat(this.zooms.style.left.replace("px",""));
          for (let j = 0; j < this.imgmodules.length; j++) {
              if (this.imgmodules[j].selects) {
                let disX = parseFloat(this.imgmodules[j].style.width.replace("px",""));
                let disLeft = parseFloat(this.imgmodules[j].style.left.replace("px",""));
                this.imgmodules[j].style.width = (disX - disX*widthRadio) + 'px';
                this.imgmodules[j].style.left = (newZoomLeft+(disLeft-oldZoomLeft)*(1-widthRadio))+'px';
                if (this.imgmodules[j].chart) {
                  this.imgmodules[j].chart.resize();
                }
              }
          }
      },
      resizeRightTop(left,top){
        this.zooms.show = true;
        // X轴,Y轴缩小的比例 
        let widthRadio = (left/parseFloat(this.zooms.style.width.replace('px','')));
        let heightRadio = (top/parseFloat(this.zooms.style.height.replace('px','')));
        let oldZoomLeft = parseFloat(this.zooms.style.left.replace('px',''));
        let oldZoomTop = parseFloat(this.zooms.style.top.replace('px',''));
        let newZoomTop = oldZoomTop+top;
        // 先变更遮罩层的宽高
        this.zooms.style.width = (parseFloat(this.zooms.style.width.replace('px',''))+left)+"px";
        this.zooms.style.height = (parseFloat(this.zooms.style.height.replace('px',''))-top)+"px";
        this.zooms.style.top = newZoomTop + "px";
        //拖动和缩放已经选中的组件
        this.reSizeRightTopModules(widthRadio,heightRadio,oldZoomLeft,oldZoomTop,newZoomTop);
      },
      reSizeRightTopModules(widthRadio,heightRadio,oldZoomLeft,oldZoomTop,newZoomTop){
        let styleLeft = parseFloat(this.zooms.style.left.replace("px",""));
        let styleTop = parseFloat(this.zooms.style.top.replace("px",""));
          for (let j = 0; j < this.imgmodules.length; j++) {
              if (this.imgmodules[j].selects) {
                let disX = parseFloat(this.imgmodules[j].style.width.replace("px",""));
                let disY = parseFloat(this.imgmodules[j].style.height.replace("px",""));
                let disLeft = parseFloat(this.imgmodules[j].style.left.replace("px",""));
                let disTop = parseFloat(this.imgmodules[j].style.top.replace("px",""));
                this.imgmodules[j].style.width = (disX + disX*widthRadio) + 'px';
                this.imgmodules[j].style.height = (disY - disY*heightRadio) + 'px';
                this.imgmodules[j].style.left = (oldZoomLeft+(disLeft-oldZoomLeft)*(1+widthRadio))+'px'; 
                this.imgmodules[j].style.top = (newZoomTop+(disTop-oldZoomTop)*(1-heightRadio))+'px';
                if (this.imgmodules[j].chart) {
                  this.imgmodules[j].chart.resize();
                }
              }
          }
      },
      resizeTop(left,top){
        this.zooms.show = true;
        // X轴,Y轴缩小的比例 
        let heightRadio = (top/parseFloat(this.zooms.style.height.replace('px','')));
        let oldZoomTop = parseFloat(this.zooms.style.top.replace('px',''));
        let newZoomTop = oldZoomTop+top;
        // 先变更遮罩层的宽高
        this.zooms.style.height = (parseFloat(this.zooms.style.height.replace('px',''))-top)+"px";
        this.zooms.style.top = newZoomTop + "px";
        //拖动和缩放已经选中的组件
        this.reSizeTopModules(heightRadio,oldZoomTop,newZoomTop);
      },
      reSizeTopModules(heightRadio,oldZoomTop,newZoomTop){
        let styleTop = parseFloat(this.zooms.style.top.replace("px",""));
          for (let j = 0; j < this.imgmodules.length; j++) {
              if (this.imgmodules[j].selects) {
                let disY = parseFloat(this.imgmodules[j].style.height.replace("px",""));
                let disTop = parseFloat(this.imgmodules[j].style.top.replace("px",""));
                this.imgmodules[j].style.height = (disY - disY*heightRadio) + 'px';
                this.imgmodules[j].style.top = (newZoomTop+(disTop-oldZoomTop)*(1-heightRadio))+'px';
                if (this.imgmodules[j].chart) {
                  this.imgmodules[j].chart.resize();
                }
              }
          }
      },
      resizeLeftTop(left,top){
        this.zooms.show = true;
        // X轴,Y轴缩小的比例 
        let widthRadio = (left/parseFloat(this.zooms.style.width.replace('px','')));
        let heightRadio = (top/parseFloat(this.zooms.style.height.replace('px','')));
        let oldZoomLeft = parseFloat(this.zooms.style.left.replace('px',''));
        let oldZoomTop = parseFloat(this.zooms.style.top.replace('px',''));
        let newZoomLeft = oldZoomLeft+left;
        let newZoomTop = oldZoomTop+top;
        // 先变更遮罩层的宽高
        
        this.zooms.style.width = (parseFloat(this.zooms.style.width.replace('px',''))-left)+"px";
        this.zooms.style.height = (parseFloat(this.zooms.style.height.replace('px',''))-top)+"px";
        this.zooms.style.left = newZoomLeft + "px";
        this.zooms.style.top = newZoomTop + "px";
        //拖动和缩放已经选中的组件
        this.reSizeLeftTopModules(widthRadio,heightRadio,oldZoomLeft,newZoomLeft,oldZoomTop,newZoomTop);
      },
      reSizeLeftTopModules(widthRadio,heightRadio,oldZoomLeft,newZoomLeft,oldZoomTop,newZoomTop){
        let styleLeft = parseFloat(this.zooms.style.left.replace("px",""));
        let styleTop = parseFloat(this.zooms.style.top.replace("px",""));
          for (let j = 0; j < this.imgmodules.length; j++) {
              if (this.imgmodules[j].selects) {
                let disX = parseFloat(this.imgmodules[j].style.width.replace("px",""));
                let disY = parseFloat(this.imgmodules[j].style.height.replace("px",""));
                let disLeft = parseFloat(this.imgmodules[j].style.left.replace("px",""));
                let disTop = parseFloat(this.imgmodules[j].style.top.replace("px",""));
                this.imgmodules[j].style.width = (disX - disX*widthRadio) + 'px';
                this.imgmodules[j].style.height = (disY - disY*heightRadio) + 'px';
                this.imgmodules[j].style.left = (newZoomLeft+(disLeft-oldZoomLeft)*(1-widthRadio))+'px'; 
                this.imgmodules[j].style.top = (newZoomTop+(disTop-oldZoomTop)*(1-heightRadio))+'px';
                if (this.imgmodules[j].chart) {
                  this.imgmodules[j].chart.resize();
                }
              }
          }
      },
      /*
           左下角拉动需要计算宽高以及左侧顶部的距离
      */
      resizeLeftBottom(left,top){
        this.zooms.show = true;
        // X轴,Y轴缩小的比例 
        let widthRadio = (left/parseFloat(this.zooms.style.width.replace('px','')));
        let heightRadio = (top/parseFloat(this.zooms.style.height.replace('px','')));
        let oldZoomLeft = parseFloat(this.zooms.style.left.replace('px',''));
        let newZoomLeft = oldZoomLeft+left;
        // 先变更遮罩层的宽高
        this.zooms.style.width = (parseFloat(this.zooms.style.width.replace('px',''))-left)+"px";
        this.zooms.style.left = newZoomLeft + "px";
        this.zooms.style.height = (parseFloat(this.zooms.style.height.replace('px',''))+top)+"px";
        //拖动和缩放已经选中的组件
        this.reSizeLeftBottomModules(widthRadio,heightRadio,oldZoomLeft,newZoomLeft);
      },
      reSizeLeftBottomModules(widthRadio,heightRadio,oldZoomLeft,newZoomLeft){
        let styleLeft = parseFloat(this.zooms.style.left.replace("px",""));
        let styleTop = parseFloat(this.zooms.style.top.replace("px",""));
          for (let j = 0; j < this.imgmodules.length; j++) {
              if (this.imgmodules[j].selects) {
                let disX = parseFloat(this.imgmodules[j].style.width.replace("px",""));
                let disY = parseFloat(this.imgmodules[j].style.height.replace("px",""));
                let disLeft = parseFloat(this.imgmodules[j].style.left.replace("px",""));
                let disTop = parseFloat(this.imgmodules[j].style.top.replace("px",""));
                this.imgmodules[j].style.width = (disX - disX*widthRadio) + 'px';
                this.imgmodules[j].style.height = (disY + disY*heightRadio) + 'px';
                this.imgmodules[j].style.left = (newZoomLeft+(disLeft-oldZoomLeft)*(1-widthRadio))+'px'; 
                this.imgmodules[j].style.top = (disTop + (disTop-styleTop)*heightRadio) + 'px';
                if (this.imgmodules[j].chart) {
                  this.imgmodules[j].chart.resize();
                }
              }
          }
      },
      /*
        向下缩放时，重新计算宽度和高度以及左侧和顶上的距离
       */
      reSizeHeightModules(heightRadio){
        let styleTop = parseFloat(this.zooms.style.top.replace("px",""));
          for (let j = 0; j < this.imgmodules.length; j++) {
              if (this.imgmodules[j].selects) {
                let disY = parseFloat(this.imgmodules[j].style.height.replace("px",""));
                let disTop = parseFloat(this.imgmodules[j].style.top.replace("px",""));
                this.imgmodules[j].style.height = (disY + disY*heightRadio) + 'px';
                this.imgmodules[j].style.top = (disTop + (disTop-styleTop)*heightRadio) + 'px';
                if (this.imgmodules[j].chart) {
                  this.imgmodules[j].chart.resize();
                }
              }
          }
      },
      /*
        右下角缩放时，重新计算宽度和高度以及左侧和顶上的距离
       */
      reSizeWidthModules(widthRadio){
        let styleLeft = parseFloat(this.zooms.style.left.replace("px",""));
          for (let j = 0; j < this.imgmodules.length; j++) {
              if (this.imgmodules[j].selects) {
                let disX = parseFloat(this.imgmodules[j].style.width.replace("px",""));
                let disLeft = parseFloat(this.imgmodules[j].style.left.replace("px",""));
                this.imgmodules[j].style.width = (disX + disX*widthRadio) + 'px';
                this.imgmodules[j].style.left = (disLeft+ (disLeft-styleLeft)*widthRadio) + 'px';
                if (this.imgmodules[j].chart) {
                  this.imgmodules[j].chart.resize();
                }
              }
          }
      },
      /*
        右下角缩放时，重新计算宽度和高度以及左侧和顶上的距离
       */
      reSizeHeightAndWidthModules(widthRadio,heightRadio){
        let styleLeft = parseFloat(this.zooms.style.left.replace("px",""));
        let styleTop = parseFloat(this.zooms.style.top.replace("px",""));
          for (let j = 0; j < this.imgmodules.length; j++) {
              if (this.imgmodules[j].selects) {
                let disX = parseFloat(this.imgmodules[j].style.width.replace("px",""));
                let disY = parseFloat(this.imgmodules[j].style.height.replace("px",""));
                let disLeft = parseFloat(this.imgmodules[j].style.left.replace("px",""));
                let disTop = parseFloat(this.imgmodules[j].style.top.replace("px",""));
                this.imgmodules[j].style.width = (disX + disX*widthRadio) + 'px';
                this.imgmodules[j].style.height = (disY + disY*heightRadio) + 'px';
                this.imgmodules[j].style.left = (disLeft+ (disLeft-styleLeft)*widthRadio) + 'px';
                this.imgmodules[j].style.top = (disTop + (disTop-styleTop)*heightRadio) + 'px';
                if (this.imgmodules[j].chart) {
                  this.imgmodules[j].chart.resize();
                }
              }
          }
      },
      /*
         按下组件移动，并重新显示拖拽样式
       */
      imgModulesMouseDown(Ce,id){
        this.showModuleConfig();
        this.moduleListHidden();
        // Ce.preventDefault();
        var num = 0;
        for (let i = 0; i < this.imgmodules.length; i++) {
            if (this.imgmodules[i].id == id) {
              this.imgmodules[i].selects = true; //设置当前组件为选中
              this.imgmodules[i].style.border='1px dotted rgba(35,195,18,1)';
              num  = i;
            }else{
              if (!this.zooms.ctrenter){
                //如果没有按下ctr按键，则不把其他的组件设置为不选中
                this.imgmodules[i].selects = false;
                this.imgmodules[i].style.border='1px dotted rgba(35,195,18,0)';
              } 
            }  
        }

        // 重新计算这招组件的位置宽度
        this.resizeShow();
        //算出鼠标相对元素的位置
        let disX = parseFloat(this.imgmodules[num].style.left.replace("px",""));
        let disY = parseFloat(this.imgmodules[num].style.top.replace("px",""));
        let currentClientX = Ce.clientX;
        let currentClientY = Ce.clientY;
        this.currentmodule.id = id;
        this.currentmodule.zindex = this.imgmodules[num].style['z-index'];
        this.currentmodule.name = this.imgmodules[num].name;
        this.currentmodule.type = this.imgmodules[num].type;
        this.currentmodule.config = this.imgmodules[num].config;
        if (this.currentmodule.config.datastype=="default") {
          this.defaultsettings.datatypestyle.name="静态数据";
        }else{
          this.defaultsettings.datatypestyle.name="API";
        }

        this.defaultsettings.choosestyle.display="";
        this.defaultsettings.srcchoosestyle.display="";
        this.defaultsettings.clearnstyle.display="none";
        this.reCurrentSizeShow(disX,disY,this.imgmodules[num].style.width.replace("px",""),this.imgmodules[num].style.height.replace("px",""))
        document.onmousemove = (Ce)=>{   
            // 栅格显示
            this.modules.gridstype.display="";    
            //鼠标按下并移动的事件
            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            let left = (Ce.clientX - currentClientX)/this.modules.radio;  //左右移动的距离   
            let top = (Ce.clientY - currentClientY)/this.modules.radio; //上下移动的距离
            this.imgmodules[num].style.left = (left + disX) + 'px';
            this.imgmodules[num].style.top = (top + disY) + 'px';
            //移动元素
            this.resizeShow();
            this.currentModuleMoveResize();
        };
        document.onmouseup = (Ce) => {
          if (Ce.button==2) {
            this.menuShow(Ce);
          }else{
            this.menuHidden();
          }
          this.zooms.resize  = true; //设置模式为缩放模式
          // 但是不想讓click事件执行，因此300毫秒以后再把click事件放开，这样300毫秒内click事件已经判断完毕resize了
          setTimeout(function(){
            this.zooms.resize  = false;
          }.bind(this),300);
          // 栅格消失
            this.modules.gridstype.display="none";
            document.onmousemove = null;
            document.onmouseup = null;
        };
      },
      // 当前组件移动，放大缩小时候重新计算选中组件的位置
      currentModuleMoveResize(){
        for (let i = 0; i < this.imgmodules.length; i++) {
            if (this.imgmodules[i].id==this.currentmodule.id) {
              let left = this.imgmodules[i].style.left.replace("px","");
              let top = this.imgmodules[i].style.top.replace("px","");
              let width = this.imgmodules[i].style.width.replace("px","");
              let height = this.imgmodules[i].style.height.replace("px","");
              this.reCurrentSizeShow(left,top,width,height);
            }
        }
      },
      // 重新计算当前选中组件的宽高
      reCurrentSizeShow(left,top,width,height){
        this.currentmodule.left = Math.round(left);
        this.currentmodule.top = Math.round(top);
        this.currentmodule.width = Math.round(width);
        this.currentmodule.height = Math.round(height);
      },
      imgModulesMouseUp(e){
        e.preventDefault();
      },
      imgModulesMouseMove(e){
        e.preventDefault();
      },
      imgDragenterDrop(e){
        e.preventDefault();
        if( this.imgtype === "caisezhuzhuangtu"){
          this.moduleZhuzhuangtu(e);
        }else if( this.imgtype ==="tiaoxingtu"){
          this.moduleTiaoxingtu(e);                   
        }else if( this.imgtype === "tupian"){
         this.moduleTupian(e);
        }else if( this.imgtype === "dituzujian"){
         this.moduleDitu(e);
        }else if(this.imgtype === "jichuzhuzhuangtu"){
          this.moduleJiChuzhuzhuangtu(e)
        }else if(this.imgtype === "duidiezhuzhuangtu"){
          this.moduleDuidiezhuzhuangtu(e)
        }else if(this.imgtype === "jiaocuozhengfuzhoubiaoqiantu"){
          this.moduleJiaocuozhengfuzhoubiaoqiantu(e)
        }else if(this.imgtype === "qiantaobingtu"){
          this.moduleQiantaobingtu(e)
        }else if( this.imgtype === "jinduhuantu"){
         this.moduleJinDuhuantu(e);
        }else if( this.imgtype === "meiguitu"){
         this.moduleMeiguitu(e);
        }else if( this.imgtype === "danhangwenben"){
          this.moduleDanhangwenben(e)
        }else if( this.imgtype === "biaoge"){
          this.moduleBiaoge(e)
        }else if( this.imgtype === "shuzitu"){
          this.moduleShuzitu(e)
        }
      },
      //图片转换格式为Blob文件
      dataURLToBlob(dataurl) {
            let arr = dataurl.split(',');
            let mime = arr[0].match(/:(.*?);/)[1];
            let bstr = atob(arr[1]);
            let n = bstr.length;
            let u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
      },
      /*保存图片的方法（即按钮点击触发的方法）   
          第一个参数为需要保存的div的id名  
          第二个参数为保存图片的名称 */
      saveImage(divText) {
        this.$Spin.show();
        var node = document.getElementById('view-imgs');
        domtoimage.toPng(node)
        .then(function (dataUrl) {
            var blobfile = this.dataURLToBlob(dataUrl);
            var formData = new window.FormData();
            formData.append('file',blobfile);
            this.fileUpload(formData).then(function(res){
              if(res.code=="1"){
                this.defaultsettings.headimg =res.data.url;
                this.$Spin.hide();
                this.editModules();
                this.$router.push({
                  name:"imglist"
                })
              }else{
                this.$Spin.hide();
                this.$router.push({
                  name:"imglist"
                })
                this.$Message.info(res.message);
              }
            }.bind(this))
        }.bind(this),function(err){
          this.$Spin.hide();
          this.$router.push({
            name:"imglist"
          })
        }.bind(this))
        .catch(function (error) {
          this.$Spin.hide();
          this.$router.push({
            name:"imglist"
          })
            console.error('oops, something went wrong!', error);
        }.bind(this));
      },
      // 绘画网格
      drawGrid(color,stepx,stepy){
        var c_canvas = document.getElementById("imggriddraw")
        var ctx = c_canvas.getContext("2d");
        ctx.strokeStyle = "#f1dedf";
        ctx.strokeWidth = 1;
        ctx.lineWidth = 1;
        ctx.beginPath();
        for (var x = 0.5; x < stepx; x += 20) {
          ctx.moveTo(x, 0);
          ctx.lineTo(x, stepy);
          ctx.stroke();
        }
        for (var y = 0.5; y < stepy; y += 20) {
          ctx.moveTo(0, y);
          ctx.lineTo(stepx, y);
          ctx.stroke();
        }
        ctx.closePath();
        return;
      },
      moduleDitu(e){
        var ditu = JSON.parse(JSON.stringify(this.moduledata.state.ditu));
        var moduledatas = JSON.stringify(this.moduledata.state.ditu.data,null,2);
        var params = {
          data:ditu.data,
          geoCoordMap:ditu.geoCoordMap,
          style:ditu.style
        }
        var widgets = moduledefault.Ditu(params)
        var data = {
          id:(new Date()).valueOf(),
          type : "ditu",
          selects:false,
          name:"地图",
          config:{
            imgsrc:"",
            chart:true, //是否是百度地图组件
            img:false,//是否是图片组件
            datas:true,//是否需要数据支撑
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            autodatatime:"10",
            datasetbeforecontent:"+", //数据样式的before是+还是-
            xAxiosbeforecontent:"+",
            yAxiosbeforecontent:"+",
            widgetdata:moduledatas,
            params:params,
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:widgets,
            defaultdata:""
          },
          style:{
              "width":"400px",
              "height":"300px",
              "left":(e.clientX-100)/this.modules.radio+"px",
              "top":(e.clientY-130)/this.modules.radio+"px",
              "z-index":'1',
              "border":'1px dotted rgba(35,195,18,0)',
              "position":"absolute",
              "display":""
          }
        } /*data_end*/
        this.imgmodules.push(data);
        this.imgtype = "";
        this.$nextTick(()=>{
            var myChart = echarts.init(document.getElementById(data.id));
            data.chart = myChart;
            myChart.setOption(widgets,true)   
        })
      },
      // 堆叠柱状图
      moduleDuidiezhuzhuangtu(e){
        var moduledatas = JSON.parse(JSON.stringify(this.moduledata.state.duidiezhuzhuangtu.datas));
        var duidiezhuzhuangtu = JSON.parse(JSON.stringify(this.moduledata.state.duidiezhuzhuangtu))
        var params = {
          xAxis:duidiezhuzhuangtu.xAxis,
          yAxis:duidiezhuzhuangtu.yAxis,
          moduledatas:{
            x:duidiezhuzhuangtu.x,
            y:duidiezhuzhuangtu.y,
            label:duidiezhuzhuangtu.label,
            style:duidiezhuzhuangtu.style
          }
        }
        var widgets = moduledefault.Duidiezhuzhuangtu(params)
        var data = {
          id:(new Date()).valueOf(),
          type : "duidiezhuzhuangtu",
          selects:false,
          name:"堆叠柱状图",
          config:{
            imgsrc:"",
            chart:true, //是否是百度地图组件
            img:false,//是否是图片组件
            datas:true,//是否需要数据支撑
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            datasetbeforecontent:"+", //数据样式的before是+还是-
            xAxiosbeforecontent:"+",
            yAxiosbeforecontent:"+",
            widgetdata:moduledatas,
            params:params,
            autodatatime:"10",
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:widgets,
            defaultdata:""
          },
          style:{
              "width":"500px",
              "height":"300px",
              "left":(e.clientX-100)/this.modules.radio+"px",
              "top":(e.clientY-130)/this.modules.radio+"px",
              "z-index":'1',
              "border":'1px dotted rgba(35,195,18,0)',
              "position":"absolute",
              "display":""
          }
        } /*data_end*/
        this.imgmodules.push(data);
        this.imgtype = "";
        this.$nextTick(()=>{
            var myChart = echarts.init(document.getElementById(data.id));
            data.chart = myChart;
            myChart.setOption(data.config.widgets,true);  
            myChart.resize();  
        })
      },
      // 交错正负轴标签图
      moduleJiaocuozhengfuzhoubiaoqiantu(e){
        var moduledatas = JSON.parse(JSON.stringify(this.moduledata.state.jiaocuozhengfuzhoubiaoqiantu.datas));
        var jiaocuozhengfuzhoubiaoqiantu = JSON.parse(JSON.stringify(this.moduledata.state.jiaocuozhengfuzhoubiaoqiantu))
        var params = {
          xAxis:jiaocuozhengfuzhoubiaoqiantu.xAxis,
          yAxis:jiaocuozhengfuzhoubiaoqiantu.yAxis,
          moduledatas:{
            x:jiaocuozhengfuzhoubiaoqiantu.x,
            y:jiaocuozhengfuzhoubiaoqiantu.y,
            label:jiaocuozhengfuzhoubiaoqiantu.label,
            style:jiaocuozhengfuzhoubiaoqiantu.style
          }
        }
        var widgets = moduledefault.Jiaocuozhengfuzhoubiaoqiantu(params)
        var data = {
          id:(new Date()).valueOf(),
          type : "jiaocuozhengfuzhoubiaoqiantu",
          selects:false,
          name:"交错正负轴标签图",
          config:{
            imgsrc:"",
            chart:true, //是否是百度地图组件
            img:false,//是否是图片组件
            datas:true,//是否需要数据支撑
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            datasetbeforecontent:"+", //数据样式的before是+还是-
            xAxiosbeforecontent:"+",
            yAxiosbeforecontent:"+",
            widgetdata:moduledatas,
            params:params,
            autodatatime:"10",
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:widgets,
            defaultdata:""
          },
          style:{
              "width":"500px",
              "height":"300px",
              "left":(e.clientX-100)/this.modules.radio+"px",
              "top":(e.clientY-130)/this.modules.radio+"px",
              "z-index":'1',
              "border":'1px dotted rgba(35,195,18,0)',
              "position":"absolute",
              "display":""
          }
        } /*data_end*/
        this.imgmodules.push(data);
        this.imgtype = "";
        this.$nextTick(()=>{
            var myChart = echarts.init(document.getElementById(data.id));
            data.chart = myChart;
            myChart.setOption(data.config.widgets,true);  
            myChart.resize();  
        })
      },
      // 基础柱状图
      moduleJiChuzhuzhuangtu(e){
        var moduledatas = JSON.parse(JSON.stringify(this.moduledata.state.jichuzhuzhuangtu.datas));
        var jichuzhuzhuangtu = JSON.parse(JSON.stringify(this.moduledata.state.jichuzhuzhuangtu))
        var params = {
          xAxis:jichuzhuzhuangtu.xAxis,
          yAxis:jichuzhuzhuangtu.yAxis,
          moduledatas:{
            x:jichuzhuzhuangtu.x,
            y:jichuzhuzhuangtu.y,
            label:jichuzhuzhuangtu.label,
            style:jichuzhuzhuangtu.style
          }
        }
        var widgets = moduledefault.Jichuzhuzhuangtu(params)
        var data = {
          id:(new Date()).valueOf(),
          type : "jichuzhuzhuangtu",
          selects:false,
          name:"基础柱状图",
          config:{
            imgsrc:"",
            chart:true, //是否是百度地图组件
            img:false,//是否是图片组件
            datas:true,//是否需要数据支撑
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            datasetbeforecontent:"+", //数据样式的before是+还是-
            xAxiosbeforecontent:"+",
            yAxiosbeforecontent:"+",
            widgetdata:moduledatas,
            params:params,
            autodatatime:"10",
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:widgets,
            defaultdata:""
          },
          style:{
              "width":"500px",
              "height":"300px",
              "left":(e.clientX-100)/this.modules.radio+"px",
              "top":(e.clientY-130)/this.modules.radio+"px",
              "z-index":'1',
              "border":'1px dotted rgba(35,195,18,0)',
              "position":"absolute",
              "display":""
          }
        } /*data_end*/
        this.imgmodules.push(data);
        this.imgtype = "";
        this.$nextTick(()=>{
            var myChart = echarts.init(document.getElementById(data.id));
            data.chart = myChart;
            myChart.setOption(data.config.widgets,true);  
            myChart.resize();  
        })
      },
      // 玫瑰图
      moduleMeiguitu(e){
        var moduledatas = JSON.parse(JSON.stringify(this.moduledata.state.meiguitu.datas));
        var meiguitu = JSON.parse(JSON.stringify(this.moduledata.state.meiguitu))
        var params = {
          color:meiguitu.color,
          style:meiguitu.style,
          label:meiguitu.label,
          moduledatas:{
            x:meiguitu.x,
            y:meiguitu.y,
            label:meiguitu.label,
            legend:meiguitu.legend
          }
        }
        var widgets = moduledefault.Meiguitu(params);
        var data = {
          id:(new Date()).valueOf(),
          type : "meiguitu",
          selects:false,
          name:"玫瑰图",
          config:{
            imgsrc:"",
            chart:true, //是否是百度地图组件
            img:false,//是否是图片组件
            datas:true,//是否需要数据支撑
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            datasetbeforecontent:"+", //数据样式的before是+还是-
            widgetdata:moduledatas,
            params:params,
            autodatatime:"10",
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:widgets,
            defaultdata:""
          },
          style:{
              "width":"500px",
              "height":"400px",
              "left":(e.clientX-100)/this.modules.radio+"px",
              "top":(e.clientY-130)/this.modules.radio+"px",
              "z-index":'1',
              "border":'1px dotted rgba(35,195,18,0)',
              "position":"absolute",
              "display":""
          }
        } /*data_end*/
        this.imgmodules.push(data);
        this.imgtype = "";
        this.$nextTick(()=>{
            var myChart = echarts.init(document.getElementById(data.id));
            data.chart = myChart;
            myChart.setOption(data.config.widgets,true);  
            myChart.resize();  
        })
      },
      // 嵌套饼图
      moduleQiantaobingtu(e){
        var moduledatas = JSON.parse(JSON.stringify(this.moduledata.state.qiantaobingtu.datas));
        var qiantaobingtu = JSON.parse(JSON.stringify(this.moduledata.state.qiantaobingtu))
        var params = {
          color:qiantaobingtu.color,
          style:qiantaobingtu.style,
          label:qiantaobingtu.label,
          moduledatas:{
            data:qiantaobingtu.data,
            label:qiantaobingtu.label,
            legend:qiantaobingtu.legend
          }
        }
        var widgets = moduledefault.Qiantaobingtu(params);
        var data = {
          id:(new Date()).valueOf(),
          type : "qiantaobingtu",
          selects:false,
          name:"嵌套饼图",
          config:{
            imgsrc:"",
            chart:true, //是否是百度地图组件
            img:false,//是否是图片组件
            datas:true,//是否需要数据支撑
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            datasetbeforecontent:"+", //数据样式的before是+还是-
            widgetdata:moduledatas,
            params:params,
            autodatatime:"10",
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:widgets,
            defaultdata:""
          },
          style:{
              "width":"500px",
              "height":"400px",
              "left":(e.clientX-100)/this.modules.radio+"px",
              "top":(e.clientY-130)/this.modules.radio+"px",
              "z-index":'1',
              "border":'1px dotted rgba(35,195,18,0)',
              "position":"absolute",
              "display":""
          }
        } /*data_end*/
        this.imgmodules.push(data);
        this.imgtype = "";
        this.$nextTick(()=>{
            var myChart = echarts.init(document.getElementById(data.id));
            data.chart = myChart;
            myChart.setOption(data.config.widgets,true);  
            myChart.resize();  
        })
      },
      // 进度环图
      moduleJinDuhuantu(e){
        var moduledatas = JSON.parse(JSON.stringify(this.moduledata.state.jinduhuantu.datas));
        var jinduhuantu = JSON.parse(JSON.stringify(this.moduledata.state.jinduhuantu))
        var params =  {
          value:jinduhuantu.value,
          name:jinduhuantu.name,
          radius:jinduhuantu.radius,
          color:jinduhuantu.color,
          style:jinduhuantu.style
        }
        var widgets = moduledefault.Jinduhuantu(params);
        var data = {
          id:(new Date()).valueOf(),
          type : "jinduhuantu",
          selects:false,
          name:"进度环图",
          config:{
            imgsrc:"",
            chart:true, //是否是百度地图组件
            img:false,//是否是图片组件
            datas:true,//是否需要数据支撑
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            autodatatime:"10",
            datasetbeforecontent:"+", //数据样式的before是+还是-
            params:params,
            widgetdata:moduledatas,
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:widgets,
            defaultdata:""
          },
          style:{
              "width":"200px",
              "height":"200px",
              "left":(e.clientX-100)/this.modules.radio+"px",
              "top":(e.clientY-130)/this.modules.radio+"px",
              "z-index":'1',
              "border":'1px dotted rgba(35,195,18,0)',
              "position":"absolute",
              "display":""
          }
        } /*data_end*/
        this.imgmodules.push(data);
        this.imgtype = "";
        this.$nextTick(()=>{
            var myChart = echarts.init(document.getElementById(data.id));
            data.chart = myChart;
            myChart.setOption(data.config.widgets,true);  
            myChart.resize();  
        })
      },
      //彩色柱状图组件 
      moduleZhuzhuangtu(e){
        // JSON.parse(JSON.stringify 深度复制，防止之后新建的时候数据污染
        var moduledatas = JSON.parse(JSON.stringify(this.moduledata.state.caisezhuzhuangtu.datas));
        var caisezhuzhuangtu = JSON.parse(JSON.stringify(this.moduledata.state.caisezhuzhuangtu))
        var params = {
          xAxis:caisezhuzhuangtu.xAxis,
          yAxis:caisezhuzhuangtu.yAxis,
          moduledatas:{
            x:caisezhuzhuangtu.x,
            y:caisezhuzhuangtu.y,
            label:caisezhuzhuangtu.label,
            style:caisezhuzhuangtu.style
          }
        }
        var widgets = moduledefault.Caisezhuzhuangtu(params)
        var data = {
          id:(new Date()).valueOf(),
          type : "caisezhuzhuangtu",
          selects:false,
          name:"彩色柱状图",
          config:{
            imgsrc:"",
            chart:true, //是否是百度地图组件
            img:false,//是否是图片组件
            datas:true,//是否需要数据支撑
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            datasetbeforecontent:"+", //数据样式的before是+还是-
            xAxiosbeforecontent:"+",
            yAxiosbeforecontent:"+",
            widgetdata:moduledatas,
            params:params,
            autodatatime:"10",
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:widgets,
            defaultdata:""
          },
          style:{
              "width":"500px",
              "height":"300px",
              "left":(e.clientX-100)/this.modules.radio+"px",
              "top":(e.clientY-130)/this.modules.radio+"px",
              "z-index":'1',
              "border":'1px dotted rgba(35,195,18,0)',
              "position":"absolute",
              "display":""
          }
        } /*data_end*/
        this.imgmodules.push(data);
        this.imgtype = "";
        this.$nextTick(()=>{
            var myChart = echarts.init(document.getElementById(data.id));
            data.chart = myChart;
            myChart.setOption(data.config.widgets,true);  
            myChart.resize();  
        })
      },
      // 新增条形图组件
      moduleTiaoxingtu(e){
        var moduledatas = JSON.parse(JSON.stringify(this.moduledata.state.tiaoxingtu.datas));
        var tiaoxingtu = JSON.parse(JSON.stringify(this.moduledata.state.tiaoxingtu))
        var params = {
          xAxis:tiaoxingtu.xAxis,
          yAxis:tiaoxingtu.yAxis,
          moduledatas:{
            x:tiaoxingtu.x,
            y:tiaoxingtu.y,
            label:tiaoxingtu.label,
            style:tiaoxingtu.style
          }
        }
        var widgets = moduledefault.Tiaoxingtu(params);
        var data = {
          id:(new Date()).valueOf(),
          type:"tiaoxingtu",
          selects:false,
          name:"条形图",
          config:{
           imgsrc:"",
            chart:true, //是否是百度地图组件
            img:false,//是否是图片组件
            datas:true,//是否需要数据支撑
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            datasetbeforecontent:"+", //数据样式的before是+还是-
            xAxiosbeforecontent:"+",
            yAxiosbeforecontent:"+",
            widgetdata:moduledatas,
            params:params,
            autodatatime:"10",
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:widgets,
            defaultdata:""
          },
          style:{
              "width":"500px",
              "height":"300px",
              "left":(e.clientX-100)/this.modules.radio+"px",
              "top":(e.clientY-130)/this.modules.radio+"px",
              "z-index":'1',
              "border":'1px dotted rgba(35,195,18,0)',
              "position":"absolute",
              "display":""
          }
        } /*data_end*/
        this.imgmodules.push(data);
        this.imgtype = "";
        this.$nextTick(()=>{
            var myChart = echarts.init(document.getElementById(data.id));
            data.chart = myChart;
            var symbolSize = 20;
            var datas = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];
            myChart.setOption(data.config.widgets,true);
            myChart.resize();
        })  /*next_tick_end*/   
      },
      moduleTupian(e){
        var data = {
          id:(new Date()).valueOf(),
          type : "tupian",
          selects:false,
          name:"图片",
          config:{
            imgsrc:"http://leqcdn.shengdianshiji.com/datamax_default_14.png",
            chart:false, //是否是百度地图组件
            img:true,//是否是图片组件
            datas:false,//是否需要数据支撑
            widgetdata:"",
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            autodatatime:"10",
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:{},
            defaultdata:""
          },
          style:{
              "width":"90px",
              "height":"90px",
              "left":(e.clientX-100)/this.modules.radio+"px",
              "top":(e.clientY-130)/this.modules.radio+"px",
              "z-index":'1',
              "border":'1px dotted rgba(35,195,18,0)',
              "position":"absolute",
              "display":""
          }
        } /*data_end*/
        this.imgmodules.push(data);
        this.imgtype = "";
      },
      // 表格
      moduleBiaoge(e){
        var moduledatas = JSON.parse(JSON.stringify(this.moduledata.state.biaoge.datas));
        var biaoge = JSON.parse(JSON.stringify(this.moduledata.state.biaoge))
        var data = {
          id:(new Date()).valueOf(),
          type : "biaoge",
          selects:false,
          name:"表格",
          config:{
            imgsrc:"",
            chart:false, //是否是百度地图组件
            img:false,//是否是图片组件
            datas:true,//是否需要数据支撑
            widgetdata:moduledatas,
            datasetbeforecontent:"+", //数据样式的before是+还是-
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            autodatatime:"10",
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:biaoge.config,
            defaultdata:""
          },
          style:{
              "width":"500px",
              "height":"250px",
              "left":(e.clientX-100)/this.modules.radio+"px",
              "top":(e.clientY-90)/this.modules.radio+"px",
              "z-index":'1',
              "border":'1px dotted rgba(35,195,18,0)',
              "position":"absolute",
              "display":""
          }
        } /*data_end*/
        this.imgmodules.push(data);

        this.imgtype = "";
      },
      moduleShuzitu(e){
        var moduledatas = JSON.parse(JSON.stringify(this.moduledata.state.shuzitu.datas));
        var shuzitu = JSON.parse(JSON.stringify(this.moduledata.state.shuzitu))
        var data = {
          id:(new Date()).valueOf(),
          type : "shuzitu",
          selects:false,
          name:"数字图",
          config:{
            imgsrc:"",
            chart:false, //是否是百度地图组件
            img:false,//是否是图片组件
            datas:true,//是否需要数据支撑
            widgetdata:moduledatas,
            datasetbeforecontent:"+", //数据样式的before是+还是-
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            autodatatime:"10",
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:shuzitu.config,
            defaultdata:""
          },
          style:{
              "width":"330px",
              "height":"65px",
              "left":(e.clientX-100)/this.modules.radio+"px",
              "top":(e.clientY-90)/this.modules.radio+"px",
              "z-index":'1',
              "border":'1px dotted rgba(35,195,18,0)',
              "position":"absolute",
              "display":""
          }
        } /*data_end*/
        this.imgmodules.push(data);
        this.imgtype = "";
      },
      // 单行文本
      moduleDanhangwenben(e){
        var moduledatas = JSON.parse(JSON.stringify(this.moduledata.state.danhangwenben.datas));
        var danhangwenben = JSON.parse(JSON.stringify(this.moduledata.state.danhangwenben))
        var data = {
          id:(new Date()).valueOf(),
          type : "danhangwenben",
          selects:false,
          name:"单行文本",
          config:{
            imgsrc:"http://leqcdn.shengdianshiji.com/datamax_default_14.png",
            chart:false, //是否是百度地图组件
            img:false,//是否是图片组件
            datas:true,//是否需要数据支撑
            widgetdata:moduledatas,
            datasetbeforecontent:"+", //数据样式的before是+还是-
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            autodatatime:"10",
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:danhangwenben.config,
            defaultdata:""
          },
          style:{
              "width":"200px",
              "height":"40px",
              "left":(e.clientX-100)/this.modules.radio+"px",
              "top":(e.clientY-90)/this.modules.radio+"px",
              "z-index":'1',
              "border":'1px dotted rgba(35,195,18,0)',
              "position":"absolute",
              "display":""
          }
        } /*data_end*/
        this.imgmodules.push(data);
        this.imgtype = "";
      },
      // 重新设置彩色柱状图的样式
      reCaisezhuzhuangtu(j,id){
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if ((currentmodule.config.datas&&currentmodule.config.datastype=="default")||(currentmodule.config.datas&&currentmodule.config.datastype=="api"&&!currentmodule.config.api)) {
              var params = currentmodule.config.params;
              var widgets = moduledefault.Caisezhuzhuangtu(params);
              currentmodule.config.widgets = widgets;
              this.$nextTick(() => {
                if (currentmodule.config.datas&&currentmodule.config.chart) {
                  if (currentmodule.chart) {
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  }else{
                    var myChart = echarts.init(document.getElementById(id));
                    currentmodule.chart = myChart;
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  } 
                }   
              })
            // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect
                    }
                    this.ajaxs(param).then(function(res){
                       var params = currentmodule.config.params;
                       if (res.code!="1") {
                        this.$nextTick(() => {
                          var widgets = moduledefault.Caisezhuzhuangtu(params);
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              myChart.setOption(widgets,true);
                              myChart.resize();
                          }   
                         })
                         return;
                       }
                       if(!JSON.parse(res.data).x||!JSON.parse(res.data).y){
                         return;
                       }
                       params.moduledatas.x = JSON.parse(res.data).x||[];
                       params.moduledatas.y = JSON.parse(res.data).y||[];
                       params.moduledatas.label = JSON.parse(res.data).label||[];
                       var data = {
                        "x":params.moduledatas.x,
                        "y":params.moduledatas.y,
                        "label":params.moduledatas.label
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                       var widgets = moduledefault.Caisezhuzhuangtu(params);
                       currentmodule.config.widgets = widgets;
                        this.$nextTick(() => {
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                            if (currentmodule.chart) {
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            }else{
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            } 
                          }   
                        })
                    }.bind(this))  
                  }
                }
              }
            }
          }//if_end
        }
      },
      // 重新设置堆叠柱状图的样式
      reDuidiezhuzhuangtu(j,id){
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if ((currentmodule.config.datas&&currentmodule.config.datastype=="default")||(currentmodule.config.datas&&currentmodule.config.datastype=="api"&&!currentmodule.config.api)) {
              var params = currentmodule.config.params;
              var widgets = moduledefault.Duidiezhuzhuangtu(params);
              currentmodule.config.widgets = widgets;
              this.$nextTick(() => {
                if (currentmodule.config.datas&&currentmodule.config.chart) {
                  if (currentmodule.chart) {
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  }else{
                    var myChart = echarts.init(document.getElementById(id));
                    currentmodule.chart = myChart;
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  } 
                }   
              })
            // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect
                    }
                    this.ajaxs(param).then(function(res){
                       var params = currentmodule.config.params;
                       if (res.code!="1") {
                        this.$nextTick(() => {
                          var widgets = moduledefault.Duidiezhuzhuangtu(params);
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              myChart.setOption(widgets,true);
                              myChart.resize();
                          }   
                         })
                         return;
                       }
                       if(!JSON.parse(res.data).x||!JSON.parse(res.data).y){
                         return;
                       }
                       params.moduledatas.x = JSON.parse(res.data).x||[];
                       params.moduledatas.y = JSON.parse(res.data).y||[];
                       params.moduledatas.label = JSON.parse(res.data).label||[];
                       var data = {
                        "x":params.moduledatas.x,
                        "y":params.moduledatas.y,
                        "label":params.moduledatas.label
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                       var widgets = moduledefault.Duidiezhuzhuangtu(params);
                       currentmodule.config.widgets = widgets;
                        this.$nextTick(() => {
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                            if (currentmodule.chart) {
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            }else{
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            } 
                          }   
                        })
                    }.bind(this))  
                  }
                }
              }
            }
          }//if_end
        }
      },
      // 重新设置交错正负轴标签图
      reJiaocuozhengfuzhoubiaoqiantu(j,id){
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if ((currentmodule.config.datas&&currentmodule.config.datastype=="default")||(currentmodule.config.datas&&currentmodule.config.datastype=="api"&&!currentmodule.config.api)) {
              var params = currentmodule.config.params;
              var widgets = moduledefault.Jiaocuozhengfuzhoubiaoqiantu(params);
              currentmodule.config.widgets = widgets;
              this.$nextTick(() => {
                if (currentmodule.config.datas&&currentmodule.config.chart) {
                  if (currentmodule.chart) {
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  }else{
                    var myChart = echarts.init(document.getElementById(id));
                    currentmodule.chart = myChart;
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  } 
                }   
              })
            // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect
                    }
                    this.ajaxs(param).then(function(res){
                       var params = currentmodule.config.params;
                       if (res.code!="1") {
                        this.$nextTick(() => {
                          var widgets = moduledefault.Jiaocuozhengfuzhoubiaoqiantu(params);
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              myChart.setOption(widgets,true);
                              myChart.resize();
                          }   
                         })
                         return;
                       }
                       if(!JSON.parse(res.data).x||!JSON.parse(res.data).y){
                         return;
                       }
                       params.moduledatas.x = JSON.parse(res.data).x||[];
                       params.moduledatas.y = JSON.parse(res.data).y||[];
                       params.moduledatas.label = JSON.parse(res.data).label||[];
                       var data = {
                        "x":params.moduledatas.x,
                        "y":params.moduledatas.y,
                        "label":params.moduledatas.label
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                       var widgets = moduledefault.Jiaocuozhengfuzhoubiaoqiantu(params);
                       currentmodule.config.widgets = widgets;
                        this.$nextTick(() => {
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                            if (currentmodule.chart) {
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            }else{
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            } 
                          }   
                        })
                    }.bind(this))  
                  }
                }
              }
            }
          }//if_end
        }
      },
      reQiantaobingtu(j,id){
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if ((currentmodule.config.datas&&currentmodule.config.datastype=="default")||(currentmodule.config.datas&&currentmodule.config.datastype=="api"&&!currentmodule.config.api)) {
              var params = currentmodule.config.params;
              var widgets = moduledefault.Qiantaobingtu(params);
              currentmodule.config.widgets = widgets;
              this.$nextTick(() => {
                if (currentmodule.config.datas&&currentmodule.config.chart) {
                  if (currentmodule.chart) {
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  }else{
                    var myChart = echarts.init(document.getElementById(id));
                    currentmodule.chart = myChart;
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  } 
                }   
              })
            // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect
                    }
                    this.ajaxs(param).then(function(res){
                       var params = currentmodule.config.params;
                       if (res.code!="1") {
                        this.$nextTick(() => {
                          var widgets = moduledefault.Qiantaobingtu(params);
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              myChart.setOption(widgets,true);
                              myChart.resize();
                          }   
                         })
                         return;
                       }
                       if(!JSON.parse(res.data).x||!JSON.parse(res.data).y){
                         return;
                       }
                       params.moduledatas.data = JSON.parse(res.data).data||[];
                       params.moduledatas.label = JSON.parse(res.data).label||[];
                       var data = {
                        "data":params.moduledatas.data,
                        "label":params.moduledatas.label
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                       var widgets = moduledefault.Qiantaobingtu(params);
                       currentmodule.config.widgets = widgets;
                        this.$nextTick(() => {
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                            if (currentmodule.chart) {
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            }else{
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            } 
                          }   
                        })
                    }.bind(this))  
                  }
                }
              }
            }
          }//if_end
        }
      },
      // 重新设置玫瑰图的样式，涉及到函数
      reMeiGuitu(j,id){
         for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if ((currentmodule.config.datas&&currentmodule.config.datastype=="default")||(currentmodule.config.datas&&currentmodule.config.datastype=="api"&&!currentmodule.config.api)) {
              var params = currentmodule.config.params;
              var widgets = moduledefault.Meiguitu(params);
              currentmodule.config.widgets = widgets;
              this.$nextTick(() => {
                if (currentmodule.config.datas&&currentmodule.config.chart) {
                  if (currentmodule.chart) {
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  }else{
                    var myChart = echarts.init(document.getElementById(id));
                    currentmodule.chart = myChart;
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  } 
                }   
              })
            // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect
                    }
                    this.ajaxs(param).then(function(res){
                       var params = currentmodule.config.params;
                       if (res.code!="1") {
                        this.$nextTick(() => {
                          var widgets = moduledefault.Meiguitu(params);
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              myChart.setOption(widgets,true);
                              myChart.resize();
                          }   
                         })
                         return;
                       }
                       if(!JSON.parse(res.data).x||!JSON.parse(res.data).y){
                         return;
                       }
                       params.label = JSON.parse(res.data).label||"值";
                       params.moduledatas.x = JSON.parse(res.data).x||[];
                       params.moduledatas.y = JSON.parse(res.data).y||[];
                       params.moduledatas.label = JSON.parse(res.data).label||[];
                       var data = {
                        "x":params.moduledatas.x,
                        "y":params.moduledatas.y,
                        "label":params.moduledatas.label
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                       var widgets = moduledefault.Meiguitu(params);
                       currentmodule.config.widgets = widgets;
                        this.$nextTick(() => {
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                            if (currentmodule.chart) {
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            }else{
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            } 
                          }   
                        })
                    }.bind(this))  
                  }
                }
              }
            }
          }//if_end
        } //for_end
      },
      reBiaoge(j,id){
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if (currentmodule.config.datas&&currentmodule.config.datastype=="default") {
              // var widgets = currentmodule.config.widgets;
              // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect
                    }
                    this.ajaxs(param).then(function(res){
                       var widgets = currentmodule.config.widgets;
                       if (res.code!="1") {
                         return;
                       }
                       if(!JSON.parse(res.data).x||!JSON.parse(res.data).y){
                         return;
                       }
                       widgets.x = JSON.parse(res.data).x||[];
                       widgets.y = JSON.parse(res.data).y||[];
                       var data = {
                        "x":widgets.x,
                        "y":widgets.y
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                    }.bind(this))  
                  }
                }
              }
            }
          }//if_end
        } //for_end
      },
      reShuzitu(j,id){
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if (currentmodule.config.datas&&currentmodule.config.datastype=="default") {
              // var widgets = currentmodule.config.widgets;
            // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect
                    }
                    this.ajaxs(param).then(function(res){
                       var widgets = currentmodule.config.widgets;
                       if (res.code!="1") {
                         return;
                       }
                       if(!JSON.parse(res.data).text){
                         return;
                       }
                       widgets.text = JSON.parse(res.data).text||"";
                       var data = {
                        "text":widgets.text
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                    }.bind(this))  
                  }
                }
              }
            }
          }//if_end
        } //for_end
      },
      reDanhangwenben(j,id){
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if (currentmodule.config.datas&&currentmodule.config.datastype=="default") {
              // var widgets = currentmodule.config.widgets;
            // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect
                    }
                    this.ajaxs(param).then(function(res){
                       var widgets = currentmodule.config.widgets;
                       if (res.code!="1") {
                         return;
                       }
                       if(!JSON.parse(res.data).text){
                         return;
                       }
                       widgets.text = JSON.parse(res.data).text||"";
                       var data = {
                        "text":widgets.text
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                    }.bind(this))  
                  }
                }
              }
            }
          }//if_end
        } //for_end
      },
      reJinduhuantu(j,id){
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if ((currentmodule.config.datas&&currentmodule.config.datastype=="default")||(currentmodule.config.datas&&currentmodule.config.datastype=="api"&&!currentmodule.config.api)) {
              var params = currentmodule.config.params;
              var widgets = moduledefault.Jinduhuantu(params);
              currentmodule.config.widgets = widgets;
              this.$nextTick(() => {
                if (currentmodule.config.datas&&currentmodule.config.chart) {
                  if (currentmodule.chart) {
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  }else{
                    var myChart = echarts.init(document.getElementById(id));
                    currentmodule.chart = myChart;
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  } 
                }   
              })
            // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect
                    }
                    this.ajaxs(param).then(function(res){
                       var params = currentmodule.config.params;
                       if (res.code!="1") {
                        this.$nextTick(() => {
                          var widgets = moduledefault.Meiguitu(params);
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              myChart.setOption(widgets,true);
                              myChart.resize();
                          }   
                         })
                         return;
                       }
                       if(!JSON.parse(res.data).value||!JSON.parse(res.data).name){
                         return;
                       }
                       params.value = JSON.parse(res.data).value||"0";
                       params.name = JSON.parse(res.data).name||"百分比";
                       var data = {
                        "value":params.value,
                        "name":params.name
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                       var widgets = moduledefault.Jinduhuantu(params);
                       currentmodule.config.widgets = widgets;
                       this.$nextTick(() => {
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                            if (currentmodule.chart) {
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            }else{
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            } 
                          }   
                        })
                    }.bind(this))  
                  }
                }
              }
            }
          }//if_end
        } //for_end
      },
      reDitu(j,id){
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if ((currentmodule.config.datas&&currentmodule.config.datastype=="default")||(currentmodule.config.datas&&currentmodule.config.datastype=="api"&&!currentmodule.config.api)) {
              var params = currentmodule.config.params;
              var widgets = moduledefault.Ditu(params);
              currentmodule.config.widgets = widgets;
              this.$nextTick(() => {
                if (currentmodule.config.datas&&currentmodule.config.chart) {
                  if (currentmodule.chart) {
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  }else{
                    var myChart = echarts.init(document.getElementById(id));
                    currentmodule.chart = myChart;
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  } 
                }   
              })
            // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect
                    }
                    this.ajaxs(param).then(function(res){
                       var params = currentmodule.config.params;
                       params.data = JSON.parse(res.data).data||[];
                       var data = {
                        "data":params.data,
                        "geoCoordMap":params.geoCoordMap,
                        "style":params.style
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                       var widgets = moduledefault.Ditu(params);
                       currentmodule.config.widgets = widgets;
                        this.$nextTick(() => {
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                            if (currentmodule.chart) {
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            }else{
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            } 
                          }   
                        })
                    }.bind(this))  
                  }
                }
              }
            }
          }//if_end
        }
        // var params = this.imgmodules[i].config.params;
        // var widgets = moduledefault.Tiaoxingtu(params);
        // this.imgmodules[i].config.widgets = widgets;
      },
      reTiaoxingtu(j,id){
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if ((currentmodule.config.datas&&currentmodule.config.datastype=="default")||(currentmodule.config.datas&&currentmodule.config.datastype=="api"&&!currentmodule.config.api)) {
              var params = currentmodule.config.params;
              var widgets = moduledefault.Tiaoxingtu(params);
              currentmodule.config.widgets = widgets;
              this.$nextTick(() => {
                if (currentmodule.config.datas&&currentmodule.config.chart) {
                  if (currentmodule.chart) {
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  }else{
                    var myChart = echarts.init(document.getElementById(id));
                    currentmodule.chart = myChart;
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  } 
                }   
              })
            // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect
                    }
                    this.ajaxs(param).then(function(res){
                       var params = currentmodule.config.params;
                       if (res.code!="1") {
                        this.$nextTick(() => {
                          var widgets = moduledefault.Tiaoxingtu(params);
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              myChart.setOption(widgets,true);
                              myChart.resize();
                          }   
                         })
                         return;
                       }
                       if(!JSON.parse(res.data).x||!JSON.parse(res.data).y){
                         return;
                       }
                       params.moduledatas.x = JSON.parse(res.data).x||[];
                       params.moduledatas.y = JSON.parse(res.data).y||[];
                       params.moduledatas.label = JSON.parse(res.data).label||[];
                       var data = {
                        "x":params.moduledatas.x,
                        "y":params.moduledatas.y,
                        "label":params.moduledatas.label
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                       var widgets = moduledefault.Tiaoxingtu(params);
                       currentmodule.config.widgets = widgets;
                        this.$nextTick(() => {
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                            if (currentmodule.chart) {
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            }else{
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            } 
                          }   
                        })
                    }.bind(this))  
                  }
                }
              }
            }
          }//if_end
        }
        // var params = this.imgmodules[i].config.params;
        // var widgets = moduledefault.Tiaoxingtu(params);
        // this.imgmodules[i].config.widgets = widgets;
      },
      // 基础柱状图数据重新编排页面样式
      reJichuzhuzhuangtu(j,id){
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if ((currentmodule.config.datas&&currentmodule.config.datastype=="default")||(currentmodule.config.datas&&currentmodule.config.datastype=="api"&&!currentmodule.config.api)) {
              var params = currentmodule.config.params;
              params.x = JSON.parse(currentmodule.config.widgetdata).x;
              params.y = JSON.parse(currentmodule.config.widgetdata).y;
              params.moduledatas.y = JSON.parse(currentmodule.config.widgetdata).y;
              params.moduledatas.x = JSON.parse(currentmodule.config.widgetdata).x;
              var widgets = moduledefault.Jichuzhuzhuangtu(params);
              currentmodule.config.widgets = widgets;
              this.$nextTick(() => {
                if (currentmodule.config.datas&&currentmodule.config.chart) {
                  if (currentmodule.chart) {
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  }else{
                    var myChart = echarts.init(document.getElementById(id));
                    currentmodule.chart = myChart;
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  } 
                }   
              })
            // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"&&currentmodule.config.api){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect
                    }
                    this.ajaxs(param).then(function(res){
                       var params = currentmodule.config.params;
                       if (res.code!="1") {
                        this.$nextTick(() => {
                          var widgets = moduledefault.Jichuzhuzhuangtu(params);
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              myChart.setOption(widgets,true);
                              myChart.resize();
                          }   
                         })
                         return;
                       }
                       if (!JSON.parse(res.data).x||!JSON.parse(res.data).y) {
                         return;
                       }
                       params.moduledatas.x = JSON.parse(res.data).x||[];
                       params.moduledatas.y = JSON.parse(res.data).y||[];
                       params.moduledatas.label = JSON.parse(res.data).label||[];
                       var data = {
                        "x":params.moduledatas.x,
                        "y":params.moduledatas.y,
                        "label":params.moduledatas.label
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                       var widgets = moduledefault.Jichuzhuzhuangtu(params);
                       currentmodule.config.widgets = widgets;
                        this.$nextTick(() => {
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                            if (currentmodule.chart) {
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            }else{
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            } 
                          }   
                        })
                    }.bind(this))  
                  }// if(objExp.test(currentmodule.config.api)==true)
                }// if (currentmodule.config.api)_end
              }
            }
          }//if_end
        }
      }, // reJichuzhuzhuangtu_end
      apiChange(e){
        var api = e.target.value;
        var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
        var objExp=new RegExp(Expression);
        if(objExp.test(api)==true){
          this.autoGetData(this.currentmodule.type,this.currentmodule.id);  
        }else{
          this.$Message.info("API地址错误！")
        }
      },
      ajaxs(params){
        return new Promise((resolve, reject) => {
          this.ajax({params}).then(function(res){
            resolve(res)
          },function(err){
            console.log(err);
            reject(err)
          })
        })
      }
    }
  }
</script>
<style scoped  lang="less">
  
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  @import "../../assets/less/style.less";

  li{
    list-style-type:none;
  }
  .datamax{
    .view-container{
      position: absolute;
      top: 48px;
      width: 100%;
      bottom: 0px;
      cursor: default;
      background: #2A2B3D;
      #view-profile{
        position: absolute;
        transform-origin: 0 0;
        left: 95px;
        top: 15px;
        bottom: 40px;
        overflow: auto;
        #view-menu{
          position:absolute;
          width:85px;
          background:#202020;  
          ul{
            width: 100%;
            li{
                text-align: center;
                color: #868686;
                cursor: pointer;
                transition: 0.3s;
                padding: 5px;
            }
            li:hover{
              color: #ececec;
              background:#505050;
            }
          } 
        }
      #view-imgs{
        position: absolute;
        transform-origin: 0 0;
        /* left: 10px; */
        /* top: 20px; */
        width: 1920px;
        height: 1080px;
        #imggrid{
          position: absolute;
          top: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
          #imggriddraw{
            width: 100%;
            height: 100%;
          }
        }
        #imgmodules,#zoom-container{
          position: absolute;
          left: 0px;
          width: 100%;
          height: 100%;
        }
        #zoom-container{
          .zoom-handles{
            border: 1px solid rgba(0,0,0,0);
            position: absolute;
            .handle-left{
              cursor: w-resize;
              top: 50%;
              left: -8px;
              margin-top: -8px;
            }
            .handle-right{
              cursor: e-resize;
              top: 50%;
              right: -8px;
              margin-top: -8px;
            }
            .handle-top{
              cursor: n-resize;
              top: -8px;
              left: 50%;
              margin-left: -8px;
            }
            .handle-bottom{
              cursor: s-resize;
              left: 50%;
              bottom: -8px;
              margin-left: -8px;
            }
            .handle-leftbottom{
              cursor: sw-resize;
              bottom: -6px;
              left: -8px;
            }
            .handle-lefttop{
              cursor: nw-resize;
              top: -8px;
              left: -8px;
            }
            .handle-righttop{
              cursor: ne-resize;
              top: -8px;
              right: -8px;
            }
            .handle-rightbottom{
              cursor: se-resize;
              bottom: -8px;
              right: -8px;
            }
          }
        }
      }
      /* #view-imgs_end */
     }
     /* #view-profile_end */
    }
  }
  #drop-board{
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    border: 1px dotted rgba(35,195,18,1);
    z-index: 3000;
    .item-border{
      position: absolute;
      cursor: move ;
      width: 100%;
      height: 100%;
    }
  }
  .imgmoduleitem{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
  }
  .zoom-handler{
    z-index: 3001;
    width:16px;
    height: 16px;
    position: absolute;
    pointer-events: auto;
  }
  .zoom-handler:after{
    background: #fff;
    z-index: 3001;
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    top: 4px;
    left: 4px;
  }
</style>
